javascript - HTML5 Canvas : How to border a fillRect?

Question

在 HTML5 中，我想制作一个 fillRect()(填充颜色为白色)和一个 border(黑色)。我不想使用 strokeRect() 除非我以后可以填充它。我正在制作一款游戏，您可以在其中点击方 block ，它们会改变颜色(比这更复杂，但这正是本文的重点)。

<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas>
    <script>
        var c=document.getElementById("canvas1");
        var ctx=c.getContext("2d");
        ctx.strokeStyle="rgba(0,0,0,1)";
        ctx.strokeRect(0,0,100,100);
    </script>

Canvas 周围的边框仅供引用。我也可以使用 CSS，但目前一切都在 HTML 中。

Answer 1

如果没有图书馆，您以后无法填写。如果您想更改某些内容，只需重新绘制即可。你可以使用类似的东西:

ctx.fillStyle = 'blue';
ctx.strokeStyle = 'red';
var fillRect = false;
ctx.rect(20, 20, 150, 100);
if (fillRect) {
  ctx.fill();
}
ctx.stroke();

它将只绘制边框，如果您将 fillRect 更改为 true 它将被填充。您可以在每个 requestAnimationFrame 上更新您的 Canvas 。

但也许您想使用像 paper.js 这样的库。它使点击对象等操作变得更加容易，并将 Canvas 上的绘图抽象为您创建一次并稍后更新的对象，就像您要求的那样。