在HTML5中,我想制作一个fillRect()(带有白色填充颜色)和一个边框(黑色).我不想使用strokeRect(),除非我以后可以填写.我正在制作一个游戏,你点击正方形并改变颜色(它比那更复杂,但这就是它所关注的).
画布周围的边框仅供参考.
我也可以使用CSS,但目前一切都是HTML格式.
最佳答案
计算出你想要用宽度和高度绘制正方形的位置.完成后,只需先绘制一个较大的正方形,其宽度为2,高2,但中心点相同.所以你绘制一个更大的正方形,然后你在顶部绘制正常的正方形,然后给你一个正方形有边框的错觉
原文链接：https://www.f2er.com/js/426922.htmlHTML
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.
