javascript – HTML5 Canvas：如何边界fillRect？

在HTML5中,我想制作一个fillRect()(带有白色填充颜色)和一个边框(黑色).我不想使用strokeRect(),除非我以后可以填写.我正在制作一个游戏,你点击正方形并改变颜色(它比那更复杂,但这就是它所关注的).

strokeStyle="rgba(0,1)";
        ctx.strokeRect(0,100,100);
    

画布周围的边框仅供参考.
我也可以使用CSS,但目前一切都是HTML格式.

最佳答案

计算出你想要用宽度和高度绘制正方形的位置.完成后,只需先绘制一个较大的正方形,其宽度为2,高2,但中心点相同.所以你绘制一个更大的正方形,然后你在顶部绘制正常的正方形,然后给你一个正方形有边框的错觉

HTML

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,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,但您可以为函数提供任何其他厚度数,它将使用值而不是1.