为什么我的strokeStyle透明？

Question

我正在使用stroke（）绘制HTML5画布，无论我如何或何时设置globalAlpha，都会使用一定程度的透明度绘制笔画。我希望笔画完全不透明（globalAlpha = 1）。是否有其他地方设置了alpha？

在this jsfiddle中，我在画布上绘制了一条黑色实线网格。对我来说，结果显示交叉点处的点，确认线条是部分透明的。以下是它的要点：

context.globalAlpha=1;
context.strokeStyle="#000";
context.beginPath();
/* draw the grid */
context.stroke();
context.closePath;

特别奇怪的是（对我而言）是我的代码在我上次重启计算机之前没有出现这个问题，所以我猜测缓存中有一些东西在保持我想要的alpha值水平。

我显然在这里遗漏了一些东西......感谢您提供的任何帮助。

Answer 1

真实答案：

• 画布中的每个点的中心都在其（+0.5，+ 0.5）坐标中。 因此，为了避免伪影，首先将上下文翻译为（0.5,0.5）， 然后围绕坐标。

• css缩放创建工件，仅处理画布宽度和高度，除非 你想用webGL处理hidpi设备，或以较低的分辨率渲染 同时使用webGL和context2D。

- ＆GT;在您的情况下，您的设置代码将是（没有设置宽度/高度）：

（http://jsfiddle.net/gamealchemist/x9bTX/8/）

// parameters
var canvasHorizontalRatio = 0.9;
var canvasHeight = 300;
var hCenterCanvas = true;
// setup
var canvasWidth = Math.floor(window.innerWidth * canvasHorizontalRatio);
var cnv = document.getElementById("myCanvas");
cnv.width = canvasWidth;
cnv.height = canvasHeight;
if (hCenterCanvas)
cnv.style['margin-left'] = Math.floor((window.innerWidth - canvasWidth) * 0.5) + 'px';
var ctx = cnv.getContext("2d");
ctx.translate(0.5, 0.5);
gridContext();

代码的其余部分与原始代码相同，我只是改变了方块的大小，以获得完全相同的视觉方面。

ctx.beginPath();
for (var i=60; i<canvasHeight; i+=60) {
    ctx.moveTo(0,i);
    ctx.lineTo(canvasWidth,i);
}
for (i=60; i<canvasWidth; i+=60) {
    ctx.moveTo(i,0);
    ctx.lineTo(i,canvasHeight);
}
ctx.strokeStyle="#000";
ctx.stroke();
ctx.closePath();

随着这些变化，我们来自：

到：

编辑：确保舍入，实际上我认为最方便的是注入上下文并更改moveTo，lineTo：

function gridContext() {
     var oldMoveTo = CanvasRenderingContext2D.prototype.moveTo;
     CanvasRenderingContext2D.prototype.moveTo = function (x,y) {
               x |= 0; y |= 0; 
               oldMoveTo.call(this, x, y); 
     }
     var oldLineTo = CanvasRenderingContext2D.prototype.lineTo;
     CanvasRenderingContext2D.prototype.lineTo = function (x,y) {
               x |= 0; y |= 0; 
               oldLineTo.call(this, x, y); 
     }
} 

显然，您必须为所需的所有绘图功能执行此操作。

Answer 2

在画布上绘制线条时，线条本身就在像素网格上。但由于该线宽为一个像素宽，因此其中一半出现在网格两侧的每个像素中，从而产生抗锯齿效果，并且在两个像素上的线条基本上是50％透明。

相反，将您的行偏移0.5像素。这将使其在像素内完全显示。

Demo