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 = 400px;
var canvasHeight = 200px;
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

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

1 个答案: