javascript - 通过 onload 在 Canvas 上绘制文本时，文本呈颗粒状/模糊

Question

如果我尝试在 onload 事件中将文本绘制到我的 Canvas 上，文本会显示模糊。我稍后通过从另一个函数单击按钮来绘制到同一个 Canvas ，这很好。但是如果我从按钮调用这个函数，它仍然是模糊的。有人能看出这段代码有什么问题吗？

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 设置 Canvas 的宽度，那么 c.width 和 c.height 将是 Canvas 的默认大小，即 300x150 和不是 css 中定义的大小。尝试为应用程序的全局宽度和高度设置两个变量。例如

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-canvas-width