下面是一个带有 canvas 标签的简单 HTML 5 页面。在画布上用黑色绘制一个矩形，并显示黑色文本。但由于某种原因，矩形实际上是灰色的。为了让它变成黑色，我必须在它上面画2到3次。这似乎表明存在某种阿尔法问题，但我不知道为什么会这样。
另外，线宽看起来比 1px 宽很多......？
谁能告诉我我做错了什么？
function draw()
{
var canvas = document.getElementById('tutorial');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
//ctx.globalAlpha = 1;
//ctx.globalCompositeOperation = "source-over";
ctx.lineWidth = "1";
ctx.strokeStyle = "#000000";
ctx.strokeRect(100, 100, 50, 50); //appears grey
ctx.font = "22px Arial";
ctx.fillStyle = "#000000";
ctx.fillText("test", 120, 120); //appears black as expected
}
}
您的线条看起来又粗又灰，因为绘制时它与像素重叠 - 即您的线条横跨两个像素。如果您将代码更改为：
ctx.strokeRect(100.5, 100.5, 50, 50);
您会看到一条黑色实线。
请参阅此页面了解更多信息：http://diveintohtml5.info/canvas.html#paths http://diveintohtml5.info/canvas.html#paths
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
