我正在使用 stroke() 绘制到 HTML5 画布上，无论我如何或何时设置 globalAlpha，都会以一定的透明度绘制笔触。我希望中风完全不透明（globalAlpha=1）。是否还有其他地方正在设置 alpha？
在this jsfiddle 中，我在画布上绘制了一个黑色实线网格。对我来说，结果显示交叉点处的点，确认线条是部分透明的。这是它的要点：
context.globalAlpha=1;
context.strokeStyle="#000";
context.beginPath();
/* draw the grid */
context.stroke();
context.closePath;
（对我而言）特别奇怪的是，在我上次重新启动计算机之前，我的代码中没有出现这个问题，所以我猜测缓存中存在一些东西，它使 alpha 保持在我想要的水平。
我显然在这里遗漏了一些东西...感谢您提供的任何帮助。
【问题讨论】：
标签： javascript html canvas
真正的答案：
画布中的每个点的中心在其 (+0.5, +0.5) 坐标中。 因此，为了避免伪影，首先通过 (0.5, 0.5) 翻译上下文， 然后将坐标四舍五入。
css 缩放创建工件，只处理画布宽度和高度，除非 你想用 webGL 处理 hidpi 设备，或者以较低的分辨率渲染 同时使用 webGL 和 context2D。
-> 在您的情况下，您的设置代码将是（没有设置 css 宽度/高度）：
(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);
}
}
显然，您必须为所需的所有绘图功能执行此操作。
【讨论】：
myCanvas.width = myCanvas.clientWidth和myCanvas.height = myCanvas.clientHeight是不是有问题，所以画布大小可以由样式表决定？它似乎对我有用，但我还没有彻底测试过。
在画布上绘制线条时，线条本身正好位于像素网格上。但是因为线条只有一个像素宽，它的一半出现在网格两侧的每个像素中，导致抗锯齿效果和线条在两个像素上基本上是 50% 透明。
相反，将您的线偏移0.5 像素。这将使它恰好出现在内像素中。
【讨论】：
myCanvas.width = myCanvas.clientWidth 和 myCanvas.height = myCanvas.clientHeight，我没有在 jsfiddle 中使用它们。我应该做些什么来适当地调整画布的大小吗？