移动 moveTo()
将笔触移动到指定的坐标 x 以及 y 上,类似用画笔在纸上绘画,第一步先将笔移动到某个位置,然后才开始绘画
moveTo(x, y)
一般调用 beginPath() 之后,或者 canvas 刚建的时候,应该先调用 moveTo() 设置起点
直线
绘制一条从当前位置到指定 x,y 位置的直线
提示:多条连接的直线,可以画折线
lineTo(x, y)
提示:开始点也可以通过 moveTo() 函数改变。
绘制轮廓
通过线条来绘制图形轮廓
stroke()
例子
绘制直线
<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
// 移动到起点为止(10,10)
ctx.moveTo(10,10)
// 直线的终点 (50,50)
ctx.lineTo(50,50)
// 绘制线
ctx.stroke();
</script>