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,700
context.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();