キャンバスコントロールを使用してシャープで細い長方形を描画しようとしています。キャンバスの背景に画像をロードし、前景にテキストを表示したいと思います。
色や文字を設定することはできますが、どういうわけかぼやけて見えますが、この問題を解決する方法はありますか?
そして、描画する各キャンバス長方形の背景画像として画像を適用したいと思います。これらの長方形は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);
これは私のコードを実行した後に表示される画像です