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