Canvas绘图之旅

canvas是基于状态的绘制

画一条线条

HTML<canvas id='canvas'></canvas><script type="text/javascript">        var canvas = document.getElementById('canvas');        canvas.width = 500;        canvas.height = 500;        //2d绘图        var context = canvas.getContext('2d');        context.moveTo(100,100);//画笔在100,100坐标开始        context.lineTo(700,700);//移动到700,700        context.lineWidth = 10;        context.strokeStyle="#fefefe";        //绘制直线        context.stroke();</script>

这里状态都是对context进行设置的，而不会创建一个线条的对象，对这个对象进行设置状态，所以canvas不是针对对象的绘制环境，是基于状态的绘制环境

画折线

context.moveTo(100,100);//画笔在100,100坐标开始context.lineTo(700,700);//移动到700,700context.lineTo(900,1200);//移动到900,1200，多添加lineTo

画几条折线

var canvas = document.getElementById('canvas');        canvas.width = 500;        canvas.height = 500;        var context = canvas.getContext('2d');        context.moveTo(100,100);        context.lineTo(700,700);        context.lineTo(100,700)        context.lineWidth = 10;        context.strokeStyle="red";        context.stroke();        context.moveTo(100,100);        context.lineTo(700,700);        context.lineTo(100,700)        context.lineWidth = 10;        context.strokeStyle="green";        context.stroke();//在这里第二次绘制的时候，会把按照这次设置的状态，比如颜色为green，把上面的折线再重新绘制一遍        context.moveTo(100,100);        context.lineTo(700,700);        context.lineTo(100,700)        context.lineWidth = 10;        context.strokeStyle="blue";        context.stroke();//在这里第2次绘制的时候，会把按照这次设置的状态，比如颜色为green，把上面的折线再重新绘制一遍        //stroke绘制时会检查前面所这只的所有状态，按照最后一个进行绘制，即后面就把之前的覆盖掉了        //那么要想出现我们预想的效果，就要用beginPath()方法，在每一次绘制之前调用**context.beginPath()**,表示我要进行一次新的绘制了。**相同的属性值不会因为beginPath进行改变**        context.beginPath();        context.moveTo(100,100);        context.lineTo(700,700);        context.lineTo(100,700)        context.lineWidth = 10;        context.strokeStyle="blue";        context.stroke();

多边形填充和closePath

绘制封闭的多边形时，由于设置的线条宽度比较粗是，会在缝合的地方出现一个小的缺块，所以，我们就要用beginPath()和closePath()成对出现，这样canvas会自动帮我们缝合缺块。例如：

        context.beginPath();        context.moveTo(100,350);        context.lineTo(500,350);        context.lineTo(500,200);        context.lineTo(700,400);        context.lineTo(500,600);        context.lineTo(500,450);        context.lineTo(100,450);        context.lineTo(100,350);        context.closePath();        context.lineWidth = 10;        //填充颜色        //这里如果填充颜色在描边后面，则绘制的图形，填充色会覆盖5个像素的描边，所以要把填充颜色的代码放在描边之前        context.fillStyle = 'yellow';        context.strokeStyle="#000";        context.fill();        context.stroke();        context.stroke();