今回は、HTML5で追加されたcanvasタグについて書きます。
簡単に言うと、お絵かきできます。
始めてみるタグ編
<canvas width="幅" height="高さ" id="canvasBase"></canvas>
たったこれだけです。簡単です。
ただ、このままでは、なにも表示されません。
そこで、図形を描いてみます。
idは、なんでも構いません。この記事では、id="canvasBase"で統一します。
図形 - 四角
JavaScriptを使用して描きます。
var canvas = $('#canvasBase').get(0);
var context = canvas.getContext("2d");
context.beginPath();
context.fillRect(座標X, 座標Y, 幅, 高さ);
context.closePath();
fillRect() を rect()に変更すると枠だけ描かれます。
図形 - 丸
JavaScriptを使用して描きます。
var canvas = $('#canvasBase').get(0);
var context = canvas.getContext("2d");
context.beginPath();
context.arc(座標X, 座標Y, 半径, 0, 360);
context.fill();
context.closePath();
fill()は、塗りつぶすときに使います。
枠だけのときは、不要です。
図形 - 線
JavaScriptを使用して描きます。
var canvas = $('#canvasBase').get(0);
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(座標X, 座標Y);
context.lineTo(座標X, 座標Y);
context.stroke();
context.closePath();
stroke()が実行されるまで、描かれます。
三角の場合は、
:
context.moveTo(座標X, 座標Y);
context.lineTo(座標X, 座標Y);
context.lineTo(座標X, 座標Y);
context.stroke();
:
とします。
テキスト
JavaScriptを使用して描きます。
var canvas = $('#canvasBase').get(0);
var context = canvas.getContext("2d");
context.beginPath();
context.fillText(テキスト, 座標X, 座標Y);
context.closePath();
簡単に描けます。
色を変えましょう！
'context.strokeStyle = "black"; // 枠の色
context.fillStyle = "black"; // 塗りつぶす色`
最後に
お分かりの通り、とっても簡単です。
これらを少し使っただけで、簡単にお絵かきができます。
よければ、こちらで遊んでください。