为什么HTML 5画布中没有矩形黑色? [英] Why isn't rectangle black in HTML 5 canvas?
问题描述
下面是一个带有canvas标签的简单HTML 5页面。在画布上,矩形以黑色绘制,并显示黑色文本。但由于某种原因,矩形实际上是灰色的。为了使它变黑,我必须在它上面画2到3次。这似乎表明存在某种α问题,但我不知道为什么会这样。
Below is a simple HTML 5 page with a canvas tag. On the canvas a rectangle is drawn in black, and black text is shown. But for some reason, the rectangle is actually grey. To make it black, I have to draw it 2 or 3 times on top of itself. That seems to indicate there is some sort of alpha issue going on, but I don't know why that would be.
另外,线宽看起来比1px宽......?
ALSO, the line width looks quite a bit more than 1px wide.... ?
任何人都可以告诉我我做错了什么?
Can anyone show me what I'm doing wrong?
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
}
}
推荐答案
你的线看起来很胖和灰色,因为它在绘制时会重叠像素 - 即你的线跨越了两个像素。如果您将代码更改为:
Your line looks fat and grey as it is overlapping pixels when it is drawn - i.e. your line straddles two pixels. If you change your code to:
ctx.strokeRect(100.5, 100.5, 50, 50);
你会看到一条黑线。
查看此页面了解更多信息: http://diveintohtml5.info/canvas.html#paths
See this page for more information: http://diveintohtml5.info/canvas.html#paths
这篇关于为什么HTML 5画布中没有矩形黑色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!