在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。
用宽度和高度计算出要绘制正方形的位置。完成此操作后，只需简单地先画一个更大的正方形，该正方形宽2倍，高2倍但中心点相同。因此，您绘制一个更大的正方形，然后在顶部绘制普通正方形，这样就给您正方形错觉的感觉
的HTML
<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas>
的CSS
#canvas1{
border: solid 1px black;
}
Java脚本
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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句