JavaScript canvas绘制图形-不能用直线画三角形

说明

用三条直线画三角形,图形 无法闭合,如下图,缺一块

<canvas width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext('2d');
    console.log(ctx)
    // ctx.beginPath()
    // 移动到三角形最上面的点
    ctx.moveTo(100,50)
    // 从最上面的点 到 左下点,画直线
    ctx.lineTo(70,100)
    // 从左下点 到 右下点,画直线
    ctx.lineTo(130,100)
    // 从右下点 到 最上面的点,画直线
    ctx.lineTo(100,50)
    // 设置线的宽度
    // ctx.lineWidth = 1
    ctx.lineWidth = 15
    // 绘制轮廓
    ctx.stroke();

</script>

解决

详见:
https://www.malaoshi.top/show_1IX8Z5s0ifMG.html


原文出处:/show_1IX8ZnQUhw6V.html