canvasを使用する
■HTML
以下のようにcanvas要素を置く。
<canvas id="canvas" width="500" height="500"></canvas>
widthとheightの指定には属性を使用する。
■JavaScript
canvasを使う準備。
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
円を書いてみる。
context.beginPath(); context.fillStyle = 'red'; context.arc(20, 20, 10, 0, Math.PI * 2, false); context.fill(); context.closePath();
以下のようになる。
四角形を書く。
context.strokeRect(10, 20, 10, 20); context.fillStyle = 'red'; context.fillRect(50, 20, 10, 20);
以下のようになる。
ちなみにpathではないのでbeginPath()は不要らしい。
線を書いてみる。
以下のようになる。
context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 20); context.stroke();
味気ない。味気ない。
曲線を書いてみる。
以下のようになる。
context.beginPath(); context.moveTo(0, 0); context.quadraticCurveTo(500, 20, 300, 50); context.stroke();
第一引数と第二引数で引っ張るイメージだ。
TrackBack URL :
Comments (0)