标签：
在绘制之前，依据上一节所说的内容获取context 2维画布
1 context.moveTo(x,y); 定义绘图开始 2 context.lintTo(x1,y1); 定义线条画到的位置 3 context.lineWidth=5; //线条宽度 4 context.strokeStyle="red" //线条颜色 5 context.stroke(); //用于绘制线条
利用上述代码我们可以绘制
一条，从（x,y）坐标开始，到（x1,y1）结束的宽5个像素，颜色为红色的直线 这里的x，y坐标是相对于画布的左上角坐标来看的。
当然我们可以画线了，当然可以利用线条画出多边形，就像在纸上绘制一样
1 context.moveTo(100,100); 2 context.lineTo(700,700); 3 context.lineTo(100,700); 4 context.lineTo(100,100); 5 context.lineWidth=5; //线条宽度 6 context.strokeStyle="red" //线条颜色 7 context.stroke(); //用于绘制线条
就是利用lineto函数像不同的点延伸直线而已，以上代码就绘制出了一个三角形
现在多边形已经画好了，我们希望可以填充颜色，
1 context.fillStyle="#000"; //用于填充色 2 context.fill();
我们只要利用fillStyle指定颜色，这里的颜色指定和css颜色指定是一样的
然后fill（）绘制一下就ok了
一张画布当然不会只画一个图形了，我们如何去其他位置在画一个图形呢？
有人会说，直接利用moveto 移动到某个像素点，在用lineto进行绘制就行了呗，就像下面代码一样
1 context.moveTo(100,100); 2 context.lineTo(700,700); 3 context.lineTo(100,700); 4 context.lineTo(100,100); 5 context.lineWidth=5; //线条宽度 6 context.strokeStyle="red" //线条颜色 7 context.stroke(); //用于绘制线条 8 9 context.fillStyle="#000"; //用于填充色 10 context.fill(); 11 12 context.moveTo(200,100); 13 context.lineTo(800,700); 14 context.strokeStyle="blue"; 15 context.stroke();
我们可以看到，虽然三角形的边框颜色我们设置的是 红色，线条的颜色是蓝色，可是绘制完之后发现，不论边框还是线条都是蓝色。
这就是canvas绘制机制是基于状态的绘图
简单来说对线条，或则填充色的指定都是一种状态，后面相同的种类（颜色，线条宽度。。）的指定会覆盖前面的，这里蓝色的指定覆盖了红色，我们要怎么做呢？
1 context.beginPath(); 2 context.moveTo(100,100); 3 context.lineTo(700,700); 4 context.lineTo(100,700); 5 context.lineTo(100,100); 6 context.closePath(); 7 context.lineWidth=5; //线条宽度 8 context.strokeStyle="red" //线条颜色 9 context.stroke(); //用于绘制线条 10 11 context.fillStyle="#000"; //用于填充色 12 context.fill(); 13 context.beginPath(); 14 context.moveTo(200,100); 15 context.lineTo(800,700); 16 context.closePath(); 17 context.strokeStyle="blue"; 18 context.stroke();
我们只要加上beginPath和closepath把绘制线路（线条，多边形，，，）包裹起来，就可以指定包裹部分后面靠的最近的部分状态会对其起作用。
beginPath表示开始，开始绘制的图形将于前面的绘制毫无关系，只会听从后面beginPath之前的状态
closePath表示结束，结束这段绘制，如果是曲线，会用直线封闭这段曲线，这里不写，不印象状态的绘制
完整代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 9 <canvas id="canvas" width="400" height="400" style="border: 1px solid #aaa;display:block;margin: auto;">你的浏览器不支持</canvas> 10 11 <script> 12 window.onload=function(){ 13 var canvas=document.getElementById("canvas"); 14 /* canvas.width=100; 15 canvas.height=100; //在此处定义canvas的宽高*/ 16 var context=canvas.getContext(‘2d‘); 17 18 //基于context绘制 19 context.beginPath(); 20 context.moveTo(100,100); 21 context.lineTo(700,700); 22 context.lineTo(100,700); 23 context.lineTo(100,100); 24 context.closePath(); 25 context.lineWidth=5; //线条宽度 26 context.strokeStyle="red" //线条颜色 27 context.stroke(); //用于绘制线条 28 29 context.fillStyle="#000"; //用于填充色 30 context.fill(); 31 context.beginPath(); 32 context.moveTo(200,100); 33 context.lineTo(800,700); 34 context.closePath(); 35 context.strokeStyle="blue"; 36 context.stroke(); 37 context.fillStyle="red"; //用于填充色 38 context.fill(); 39 40 } 41 42 </script> 43 </body> 44 </html>
下一节，我们将会说，弧和圆的绘制。
标签：
原文地址：http://www.cnblogs.com/Mangues/p/4260851.html
