JavaScript canvas绘制图形-绘制直线(轮廓stroke()、移动moveTo()、直线lineTo())

移动 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>

原文出处:/show_1IX8Zn02MiWB.html