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，高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的{{1}}添加一个额外参数，默认值为1，但您可以为该函数提供thickness的任何其他数字，它将使用值而不是1。 / p>

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

HTML5 Canvas：如何边界fillRect？

3 个答案:

我自己尝试过，看起来像这样：