在 canvas 中画一个三角形

Question

我想在 canvas 程序中绘制一些三角形（最终添加一些动画和其他效果）。我已经设法在 canvas 中添加了一些简单的形状，但由于某些原因无法绘制三角形。我一直在使用中的一些代码，但到目前为止它不起作用。

HTML

还有更多，但为简单起见，我省略了根本不用的部分。我正在使用 Bootstrap。该脚本路径也是有效路径。

function triangles() {
    let left = document.getElementById("left")
    let ctx = left.getContext("2d");
    ctx.fillStyle = "#ff0000";

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.moveTo(100, 0);
    ctx.moveTo(0, 100);
    ctx.moveTo(0, 0);
    ctx.closePath();
    ctx.fill();
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 4;
    ctx.stroke();
}

triangles()

canvas {
  width: 400px;
  height: 400px;
  border: 2px solid #A2A2A2;
}

<div class="min-vh-100">
    <div class="row align-items-start">
        <div class="col-2">
            <canvas id="left"></canvas>
        </div>
        <div class="col-8">

        </div>
        <div class="col-2">
            <canvas id="right"></canvas>
        </div>
    </div>
</div>

使用这个让我完全空白canvas。如前所述，我尝试过其他绘制 canvas 的方法，例如 fillRect 函数，并且可以正确绘制。

任何建议都可能有帮助谢谢

Answer 1

你只是在四处走动。要绘制形状，请使用 lineTo.

let left = document.getElementById("left")
let ctx = left.getContext("2d");

ctx.fillStyle = "red";
ctx.strokeStyle = "blue";
ctx.lineWidth = 4;

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(0, 100);
ctx.lineTo(0, 0);
ctx.closePath();

ctx.fill();
ctx.stroke();

canvas {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

<canvas id="left"></canvas>

在 canvas 中画一个三角形

Drawing a triangle in a canvas

html

javascript

html5-canvas