通过onload在画布上绘制文本时，文本有颗粒状/模糊

Question

如果我试图在onload事件中将文本绘制到画布上，文本会显示为模糊。稍后，我通过另一个功能中的按钮点击绘制到同一个画布上，这很好。但如果我从按钮调用这个函数，它仍然是模糊的。有人能在这个代码中发现错误吗？

window.onload = initCanvasRender;
function initCanvasRender() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext('2d');
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = 'black';
  ctx.font = '20px Times New Roman';
  ctx.fillText('hello...', c.width/2, c.height/2);
}

Answer 1

可能有问题

ctx.fillText('hello...', c.width/2, c.height/2);

因为例如，如果您使用css设置画布的宽度，则c.width和c.height将是画布的默认大小，即300x150，而不是css中定义的大小。尝试为应用程序设置两个全局宽度和高度变量。E.g

var canvasWidth = 400;
var canvasHeight = 200;
c.width = canvasWidth;
c.height = canvasHeight;
/* ... */

然后在稍后的代码中，您可以使用canvasWidth和canvasWeight:

ctx.fillText('hello...', canvasWidth/2, canvasHeight/2);

看看这个测试：http://jsfiddle.net/EsQfb/7/在您的情况下使用canvas.width而不是canvas.style.width是很重要的。

查看此以了解有关此的更多信息：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-画布宽度