Question

这是一个产生颜色效果的代码示例。

问题是“为什么矩形（矩形1和矩形2）颜色不同？

    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    ctx.strokeRect(5, 5, 25, 15); //rect 1

    ctx.strokeRect(55, 5, 25, 15); // rect 2
    ctx.strokeRect(55, 5, 25, 15); // rect 2 again
    </script> 
    </body>
    </html>

Answer 1

这里的问题是线宽。如果将其更改为2，则会得到相同的矩形，但没有不透明度。

ctx.lineWidth = 2;

ctx.strokeRect(5, 5, 24, 14); //rect 1
ctx.strokeRect(55, 5, 24, 14); // rect 2
ctx.strokeRect(55, 5, 24, 14); // rect 2 again

我认为由于某种原因，浏览器在线上的点使用小于1像素的笔划并为了补偿它，它会降低笔划的不透明度。

线宽为2的示例： https://jsfiddle.net/2buo5cfw/4/

Answer 2

因为您在同一个地方绘制了两个矩形，并且这样就形成了画布的颜色。

测试一下。

    <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.strokeRect(5, 5, 25, 15); //rect 1

ctx.strokeRect(55, 5, 25, 15); // rect 2
ctx.strokeRect(75, 5, 25, 15); // rect 2 again
</script> 
</body>
</html>

使用javascript在画布上重新绘制后为什么颜色会发生变化？

2 个答案: