<canvas>便签用于绘制图像，图表。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本java script来完成实际的绘图任务。既然你要画出你想要的图案，你给有画布啊，总不能在空气中画画啊，所以第一步你要创建一个画布，给画布一个宽高能装下你的画。<canvas width="500" height="500" id="canvas"></canvas>。

canvas开始标签和结束便签可以填充内容，填充的内容是后备信息， 如果浏览器不支持canvas元素，就会显示这个后备信息。因为是js控制，所以在脚本语言获取这个元素。var Canvas = document.getElementById('canvas');画布创建好了，要在这个画布上绘图，就须取得绘图上下文。而取得绘图上下文的对象引用，需调用getContext（）方法并传入上下文的名字，传入‘2d’,就可以取得2D上下文对象。在使用canvas之前，首先要检测getContext（）方法是否存在。这一步非常重要。

if（canvas.getContext ){

　　var  context = canvas.getContext("2d");

　　context . strokeStyle = "red";

　　context . fillStyle = "blue"

　　......

}

使用2D绘图上下文提供的方法，可以简单绘制2D图形，比如矩形，弧线，和路径 。2D上下文的坐标开始于canvas元素的左上角，原始坐标是（0,0）。所有坐标值都是基于这个原点计算。         

填充和描边 ：填充就是用指定的样式（颜色 渐变或图像）填充图形，描边，就是只在图形的边缘划线。填充和描边取决于两个属性fillStyle和strokeStyle  这两个属值可以是字符串渐变对象，模式对象。             

绘制矩形：方法包括fillRect(),strokeRect() clearRect();这三个方法都接受4个参数，矩形x坐标，y坐标，矩形宽度，矩形高度。

 

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
　　var context = canvas.getContext('2d');
　　context.fillStyle = 'red';               //绘制红色矩形
　　context.fillRect(100, 100, 100, 100);
　　context.fillStyle = 'rgba(0,0,255,0.5)'; //绘制半透明蓝色矩形
　　context.fillRect(150, 150, 100, 100);
}

clearRect()方法用于清除画布上的矩形区域，本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。

 

canvas  线段样式 

context.lineCap='butt | round | square';

 

当两条线条交汇时，创建边角样式：

context.lineJoin='miter | bevel | round';

 

 斜街长度：内角与外角的距离，当lineJoin是miter时，用于控制斜接部分的长度  miterLimit。如果斜街长度超过miterLimit的值，就会自动变成bevel   实际运算时大于limit * lineWidth / 2的值。

 

 绘制路径

 

绘制路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。然后在调用下列方法绘制实际路径。

moveTo(x,y) 将游标移动到（x,y）,不划线。

lineTo(x,y)    从上一点开始绘制一条直线，到（x,y）

pen.lineWidth=15;
pen.moveTo(100,100);
pen.lineTo(300,100);             //图片中最粗的那条线
pen.strokeStyle = 'red';
pen.stroke();
 
pen.lineWidth=5;                 //画笔由15改成5
pen.strokeStyle = 'yellow';      //颜色变黄色
pen.lineTo(200,200);　　　　　　　 //接着上面的点画。最末端点垂直坐高垂直于红色的那条
pen.moveTo(300,100)　　　　　　　  //改变起点
pen.lineTo(100,150);                        
pen.stroke();

pen.strokeStyle = 'black';
 
pen.lineWidth=1;
pen.lineTo(50,150);
pen.lineTo(50,450);
pen.stroke();

 

我们发现他们是一个路径的（就想是一个集合），也就是你改变笔的粗细和颜色会整体改变，但是因为画在上面的已经画上面的，并不会凭空消失。

那要怎么让他们不是同一个路径呢？用这个就可以了pen.beginPath(); 开始子路径一个新的集合 就可以设置颜色 和 粗细了　。　 

 

canvas画弧

 

pen.moveTo(100,100);   

pen.arc(100, 100, 30, Math.PI / 4 * 2 , Math.PI / 1 * 2, 0);  pen.arc(圆心坐标，圆心坐标，起始弧度，结束弧度，弧形方向)；

注意起始弧度和结束弧度都是用PI的形式表示。 0顺时针  1逆时针

pen.closePath();

pen.stroke();

画出来

pen.aracTo(x1,y1,x2,y2,r); 从上一点开始绘制一条弧线（圆角）

绘制的弧线与当前点的x1,y1连线，x1,y1和x2，y2连线相切

画一个圆角矩形

pen.moveTo(120, 100);
pen.arcTo(200, 100, 200, 200, 20);
pen.arcTo(200, 200, 100, 200, 20);
pen.arcTo(100, 200, 100, 100, 20);
pen.arcTo(100, 100, 200, 100, 20);
pen.stroke();

canvas画贝塞尔曲线

pen.quadraticCurveTo(x1, y1, ex, ey);    二次贝塞尔曲线

x1 y1 控制点         ex  ey结束