0

キャンバスコントロールを使用してシャープで細い長方形を描画しようとしています。キャンバスの背景に画像をロードし、前景にテキストを表示したいと思います。

色や文字を設定することはできますが、どういうわけかぼやけて見えますが、この問題を解決する方法はありますか？

そして、描画する各キャンバス長方形の背景画像として画像を適用したいと思います。これらの長方形はdivコントロールに表示されます。したがって、キャンバス長方形がある場合は常に、背景画像を選択した画像で塗りつぶしたいと思います。 divはキャンバスの長方形ではなく、その半分だけで埋められます。描画するすべてのキャンバスの長方形に対して1つの画像を使用できるか、またはすべての長方形に対して描画する必要があるかどうかはわかりますか？

html：

<div id="divBoard" >            
        <canvas id="canvasBoard" />           
</div>

javascript：

canvas = document.getElementById("canvasBoard");
if (canvas.getContext) {
    var context = canvas.getContext("2d");
}
context.fillStyle = "green";   
context.fillRect(x, y, width,height);
context.font = "5px tahoma";
context.fillStyle = "black";
context.fillText("cell"+i, x, y + width);

これは私のコードを実行した後に表示される画像です これは私のコードを実行した後に表示される画像です

4

2 に答える 2

0

フォントがキャンバス上で鮮明にレンダリングされないという同じ問題が発生しました。私のプロジェクトでは、フォントを別の DIV に配置し、適切な z-index を使用してキャンバスにオーバーレイすることで回避策を実行しました。このアプローチは私にとって非常にうまくいきました。

于 2012-10-24T11:57:27.580 に答える
0

と に追加0.5しxてみましたyか? html5 キャンバスはアンチエイリアシングを使用するため、「鮮明な」線が必要な場合は、ピクセルの「間に」描画する必要があります。

これがどのように機能するかについての良い説明は、lineWidth の mozilla 開発者リファレンス ページにあります。

PS。この質問も参照してください

于 2012-10-24T11:59:07.327 に答える