首页 > 代码库 > canvas绘制直线多边形（二）
canvas绘制直线多边形（二）
在绘制之前，依据上一节所说的内容获取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>
下一节，我们将会说，弧和圆的绘制。
canvas绘制直线多边形（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。