Javascript HTML5 Canvas：如何为fillRect 加上边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38173871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas: How to border a fillRect?
提问by I. Golsby
In HTML5, I want to make a fillRect()(with a white fill color) and a border(black). I don't want to use strokeRect()unless I can fill that later. I'm making a game where you click on squares and they change color (it's more complex than that but that's what this focuses on).
在 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>
The border around the canvas is for reference. I can use CSS too, but currently everything is in HTML.
画布周围的边框仅供参考。我也可以使用 CSS，但目前一切都在 HTML 中。
采纳答案by Canvas
Work out the position you want to draw the square with the width and height. Once you have done that simply draw a bigger square first which has wider by 2 and higher by 2 but with the same center point. So you draw a square which is bigger and then you draw the normal square on top, this then gives you the illusion of the square has a border
计算出要绘制正方形的宽度和高度的位置。完成后，只需先绘制一个更大的正方形，它的宽度增加 2 倍，高 2 倍，但中心点相同。所以你画一个更大的正方形，然后在上面画一个普通的正方形，这会给你一个正方形有边框的错觉
HTML
HTML
<canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas>
CSS
CSS
#canvas1{
border: solid 1px black;
}
Javascript
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 link : https://jsfiddle.net/jxgw19sh/2/
jsfiddle 链接：https://jsfiddle.net/jxgw19sh/2/
-- Update --
- 更新 -
Add an extra parameter to drawBordercalled thicknessthe default value is 1 but you can provide any other number for thicknessinto the function and it will use value instead of 1.
添加一个额外的参数来drawBorder调用thickness默认值是 1，但您可以thickness在函数中提供任何其他数字，它将使用值而不是 1。
回答by Julian
you can not fill it later without a library. If you want to change something simply redraw. You can use something like that:
如果没有图书馆，您以后无法填充它。如果您想更改某些内容，只需重新绘制即可。你可以使用这样的东西：
ctx.fillStyle = 'blue';
ctx.strokeStyle = 'red';
var fillRect = false;
ctx.rect(20, 20, 150, 100);
if (fillRect) {
ctx.fill();
}
ctx.stroke();
it will draw only the border, if you change fillRectto trueit will be filled. You can update your canvas on every requestAnimationFrame.
它只会绘制边框，如果您更改fillRect为true它将被填充。您可以在每个requestAnimationFrame.
But maybe you want to use a library like paper.js. It makes things like clicking on objects much easier and it abstracts draws on canvas to objects you create once and update later, like what you asked for.
但也许你想使用像 paper.js 这样的库。它使单击对象等操作变得更加容易，并将画布上的绘图抽象为您一次创建并稍后更新的对象，就像您要求的那样。
