今回は、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"; // 塗りつぶす色`
#最後に
お分かりの通り、とっても簡単です。
これらを少し使っただけで、簡単にお絵かきができます。
よければ、こちらで遊んでください。