设置画布边框笔划的真实颜色

Setting true colors to a canvas border stroke?

本文关键字：真实 颜色 边框 布边框 设置      更新时间：2023-09-26

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

我用黑色抚摸着它的边界。

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

<!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>

问题：

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

当您创建一条画布线时，它将使一条线穿过您声明的点，宽度为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和y 中添加了.5

相关文章：