什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
1，创建Canvas画布：
<canvas id="canvas"></canvas>
2,javascript获取Canvas对象
var canvas=document.getElementById("canvas");
3,获取具体绘图的上下文对象
var context=canvas.getContext('2d');//使用context做具体的绘图工作
一、canvas的常用属性、方法
canvas.width //设置canvas画布的宽度
canvas.height //设置canvas画布的高度
canvas.getContext('2d') //获取做具体绘图工作的上下文对象
二、绘制的常用属性和方法
lineWidth //设置线条宽度
strokeStyle //设置线条样式
fillStyle //设置一个封闭图形的填充颜色
moveTo(x,y) //定义线条的开始位置
lineTo(x,y) //定义线条的另一端位置
beginPath()、closePath() //定义路径的开始和路径的封闭
rect(x,y,width,height) //定义一个矩形
stroke() //绘制前面定义的图形
strokeRect(x,y,width,height) //绘制矩形
fill() //对封闭图形做具体的填充
fillRect(x,y,width,height) //填充矩形
1，绘制直线
<canvas id="canvas" width="400" height="300" style="border:1px gray solid;margin:0 auto"></canvas>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//使用context进行绘制
if(context){
context.moveTo(100,100);//起始位置
context.lineTo(200,200);//第二个点位置
context.lineTo(100,200);//第三个点位置（以上一个点位置为起点）
context.lineTo(100,100);
context.lineWidth=1;//定义线条宽度
context.strokeStyle="red";//定义颜色
context.stroke();//绘制操作
}else{
alert("当前浏览器不支持Canvas");
}
}
</script>
2，绘制颜色不同的线条 context.beginPath() context.closePath()
//-----红色线条 context.beginPath(); context.moveTo(100,100); context.lineTo(200,200); context.lineTo(100,200); context.lineTo(100,100); context.lineWidth=1; context.strokeStyle="red"; context.stroke(); context.closePath(); //------黑色线条 context.beginPath(); context.moveTo(120,100); context.lineTo(200,180); context.strokeStyle="black"; context.stroke(); context.closePath();
3，绘制七巧板
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var tangram=[
{coordinate :[{x:0,y:0},{x:250,y:250},{x:0,y:500}],color:"#caff67"},
{coordinate :[{x:0,y:0},{x:500,y:0},{x:250,y:250}],color:"#67beef"},
{coordinate :[{x:0,y:500},{x:125,y:375},{x:250,y:500}],color:"#ef3d61"},
{coordinate :[{x:125,y:375},{x:250,y:500},{x:375,y:375},{x:250,y:250}],color:"#f9f51a"},
{coordinate :[{x:250,y:250},{x:375,y:375},{x:375,y:125}],color:"#a594e0"},
{coordinate :[{x:375,y:125},{x:375,y:375},{x:500,y:250},{x:500,y:0}],color:"#fa8e00"},
{coordinate :[{x:250,y:500},{x:500,y:500},{x:500,y:250}],color:"#f6ca29"},
];
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
if(context){
for(var i=0;i<tangram.length;i++){
Draw(tangram[i],context);
}
}else{
echo("当前浏览器不支持Canvas");
}
}
function Draw(plate,context){
context.beginPath();
context.moveTo(plate.coordinate[0].x,plate.coordinate[0].y);
for(var i=1;i<plate.coordinate.length;i++){
context.lineTo(plate.coordinate[i].x,plate.coordinate[i].y);
}
context.fillStyle=plate.color;
context.fill();
}
</script>
4、绘制一个简单的矩形框
function Draw(context){
context.beginPath();
context.strokeStyle="red";
context.strokeRect(30,30,340,240);
context.closePath();
}
5，绘制弧和圆
使用方法： arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；
function Draw(context){
context.beginPath();
context.arc(200,150,80,0,1.5*Math.PI,false);//false顺时针，true逆时针，默认是false
context.strokeStyle="green";
context.stroke();
context.closePath();
}
在stroke()，前closePath()的话将会封闭路径
