HTML5 Canvas：如何为 fillRect 加边框？

Question

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

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

画布周围的边框仅供参考。 我也可以使用 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 上更新您的画布。

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

Answer 2

用宽度和高度计算出要绘制正方形的位置。一旦你完成了，只需先画一个更大的正方形，它的宽度为 2 和更高，但具有相同的中心点。所以你画一个更大的正方形，然后在上面画一个普通的正方形，这会给你一个正方形有边框的错觉

HTML

<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas>

CSS

#canvas1{
  border: solid 1px black;
}

Javascript

var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");

var rectXPos = 50;
var rectYPos = 50;
var rectWidth = 100;
var rectHeight = 100;

drawBorder(rectXPos, rectYPos, rectWidth, rectHeight)

ctx.fillStyle='#FFF';
ctx.fillRect(rectXPos, rectYPos, rectWidth, rectHeight);

function drawBorder(xPos, yPos, width, height, thickness = 1)
{
  ctx.fillStyle='#000';
  ctx.fillRect(xPos - (thickness), yPos - (thickness), width + (thickness * 2), height + (thickness * 2));
}

jsfiddle 链接：https://jsfiddle.net/jxgw19sh/2/

-- 更新--

向drawBorder 添加一个名为thickness 的额外参数，默认值为1，但您可以在函数中为thickness 提供任何其他数字，它将使用值而不是1。

Answer 3

我自己试过了，看起来是这样的：

var x = 100;
var y = 100;
var width = 50;
var height = 50;

var borderWidth = 5;   
var offset = borderWidth * 2;

c.beginPath();
c.fillStyle = 'black';
c.fillRect( x - borderWidth, y -borderWidth, width + offset, height + offset);
c.fillStyle = 'green';
c.fillRect( x, y, width, height);