这里是产生颜色效果的代码示例。
问题是“为什么矩形(矩形 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>
最佳答案
这里的问题是线宽。如果将其更改为 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/
关于javascript - 为什么使用 JavaScript 在 Canvas 上再次重绘后颜色会发生变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44995389/