Question

我有这个设置矩形的简单代码。

我用黑色抚摸它的边框。

然而，我在这里看不到任何黑色，但灰色。

＆＃13;

<!doctype html>
<html lang="en">

<canvas id="canvas" width=300 height=300></canvas>

<script>
function draw()
{
    ctx.beginPath();
    ctx.strokeStyle = "#000000";
    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
var rect = {
    x: 10,
    y: 10,
    w: 40,
    h: 100
};
draw();
</script>

</html>

＆＃13;

问题：

我做错了什么，如何将颜色设置为我定义的颜色？

Answer 1

创建画布线时，它会使一条线穿过您声明的点，宽度为lineWidth。如果直线在2个像素之间（例如，当您创建一条穿过边框的线条时，意味着您选择x和y的整数值），它将溶解颜色以平衡线条穿过的2个像素，在这种情况下为50％左边的像素，右边的像素的50％，产生灰色。将.5添加到x和y会使该行始终保持在1像素

<!doctype html>
<html lang="en">

<canvas id="canvas" width=300 height=300></canvas>

<script>
function draw()
{
    ctx.beginPath();
    ctx.strokeStyle = "#000000";
    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
var rect = {
    x: 10.5,
    y: 10.5,
    w: 40,
    h: 100
};
draw();
</script>

</html>

如果您运行代码段，您会看到线条为黑色，宽度仅占1个像素。我刚刚将x添加到你的x和y

将真彩色设置为画布边框描边？

1 个答案: