4

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);
}
4

1 に答える 1

3

に何らかの問題がある可能性があります。

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

たとえば、キャンバスの幅を css で設定c.widthするc.heightと、キャンバスのデフォルト サイズが 300x150 になり、css で定義されたサイズではなくなります。アプリケーションのグローバルな幅と高さの 2 つの変数を設定してみてください。例えば

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

その後、コードでcanvasWidthandを使用でき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

于 2013-02-10T10:00:34.520 に答える