@blog.justoneplanet.info

日々勉強

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();

第一引数と第二引数で引っ張るイメージだ。


コメントはまだありません»

No comments yet.

RSS feed for comments on this post.TrackBack URL

Leave a comment