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