Javascript HTML5画布：如何给fillRect加边框？

在HTML5中，我想制作一个

fillRect（）

（带有白色填充色）和一个

边框（黑色）。我不想使用
strokert（）
，除非我以后可以填充它。我正在制作一个游戏，你点击方块，它们会改变颜色（比这更复杂，但这正是本文的重点）


var c=document.getElementById（“canvas1”）；
var ctx=c.getContext（“2d”）；
ctx.strokeStyle=“rgba（0,0,0,1）”；
ctx.strokeRect（0,0100）；

画布周围的边框仅供参考。
我也可以使用CSS，但目前所有内容都是HTML。
如果没有库，您以后无法填充它。如果您想更改某些内容，只需重新绘制即可。
您可以使用类似的方法：

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这样的库。它使单击对象等操作变得更容易，并将画布上的绘图抽象为您创建一次并在以后更新的对象，如您所要求的。
计算出您想要绘制正方形的位置以及宽度和高度。完成后，只需先画一个更大的正方形，其宽度为2，高度为2，但中心点相同。所以你画一个更大的正方形，然后在上面画一个普通的正方形，这给你一个正方形有边框的错觉

HTML

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));
}

JSIDLE链接：

--更新--

在
drawBorder
中添加一个名为
thickness
的额外参数，默认值为1，但您可以在函数中提供
thickness
的任何其他数字，它将使用值而不是1。
我自己尝试过，结果如下所示：
据我所知，只有两种方法可以做到这一点，要么在画布元素周围绘制边框，要么使用strokert（）在画布内部绘制边框。我仍然不明白，为什么不能使用这两个选项。为什么不使用fillRect后跟strokeRect？它完全符合您的要求。调用strokeRect可以避免位置重新计算。请添加一些关于代码的解释。@ppwater我曾想过这样做，但代码看起来几乎是不言自明的。无论如何，我要补充一点，这就足够了。你的答案看起来不错。
<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas>

#canvas1{
  border: solid 1px black;
}

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));
}

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