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();