Canvas—直线、矩形和圆

直线

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

moveTo是移动，可以理解为移动画笔。lineTo则是从当前位置往指定位置画一条直线。以上代码的效果如下：

看起来没啥问题，可是实际上，第一条直线被画了两次。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

若两线是分别画的，则应是一条红色，一条蓝色，若是后面的stroke方法将两条线都画了一遍，则两条都是蓝色。

原因是因为moveTo、lineTo这些操作都是对内存的操作而并没有绘制到屏幕上，调用stroke方法的时候才真正的被绘制，因此内存中保存着两条线的路径，因此在第二个stroke方法被调用时，第一条直线也被绘制了。

那怎么解决这个问题呢？

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'red';
cts.stroke();

ctx.beginPath();    //引入beginPath方法
ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'blue';
cts.stroke();

仅需在第一个stroke方法之后调用beginPath方法即可。这个方法会清空之前保存在内存中的路径。

矩形

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.strokeRect(100, 100, 150, 100);

尽管可以通过画线的方式画矩形，但调用strokeRect方法将会更为方便。

该方法接受4个参数，前两个是所要画的矩形左上角的坐标，后两个则分别是矩形的宽和高。

圆

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.arc(300, 300, 100, 0, 2*Math.PI);
ctx.stroke();