1

Javascript と HTML5 キャンバスを少し試してみたところ、ブラウザ (クロム) で見たときに、あまりきれいにレンダリングされていないことに気付きました。その後、Internet Explorer で見たところ、さらに悪質に見えました。少し例を作りました: http://ios.xomz.de/ html コードで canvas オブジェクトを宣言したところです。

<canvas id="mycanvas" width="1000px" height="600px"/>

そしてそれにレンダリングされた

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(200, 200, 600, 200);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.font = "40pt arial";
context.fillStyle = "black";
context.fillText("Hello World!", 220, 380);

例えば。

レンダリングがうまくいかない理由を説明できますか?

4

2 に答える 2

2

「px」は使用しないでください。自己終了タグも使用しないことをお勧めします。

<canvas id="mycanvas" width="1000" height="600"></canvas>

http://jsfiddle.net/c2KeD/

于 2012-05-03T20:01:34.613 に答える
1

この問題は、float ベースのグリッド (特に垂直線と水平線、したがって四角形) にオブジェクトを描画する方法に関連しています。

説明とスキーマについては、http: //canop.org/blog/?p=220を参照してください。

オブジェクトのサイズに応じて、形状に整数または中間整数の座標とサイズを使用する必要があります。目標は、両方の次元で完全なピクセルを埋めることです。

例えば ​​：

  • 細い線 (1 ピクセル幅) には中間整数を使用します
  • 2 ピクセル幅の線に整数座標を使用する

（そして四角形のロジックを拡張します）

あなたの場合、線幅が 5 の場合、これを使用してよりシャープな四角形を作成できます。

context.rect(200.5, 200.5, 600, 200);

ここでのデモ: http://jsfiddle.net/dystroy/TyNBB/

于 2012-05-03T20:05:11.760 に答える