HTML5 Canvasでフラクタル図形を描いてみた

2011年03月07日

ダニー / javascript, html5, canvas

はじめに

一年の1/4が終わってしまうと思ってるみなさんこんにちは。ダニーです。
今回はHTML5のCanvasの使い方を調べて
Canvasでフラクタル図形を描いてみました。

デモ
http://f96q.github.com/canvas_demo/

Canvasについて

詳しい仕様は
http://dev.w3.org/html5/canvas-api/canvas-2d-api.htmlに載っているのでそちらを参照して下さい。

Canvasを作る

[cc lang='html']

[/cc]
canvasタグでcanvasを作ります。

コンテキストの取得

[cc lang='js']
var canvas = document.getElementById('main');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
[/cc]
canvasタグの要素を取得してコンテキストの取得をします。

線を描く

[cc lang='js']
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
[/cc]
取得したコンテキストに対して
beginPathで現在のパスをリセットします。
moveToで線の始点の位置を
lineToで線の終点の位置を指定します。
strokeで線を引きます。

円を描く

[cc lang='js']
ctx.beginPath();
ctx.arc(250, 250, 128, 0, 2 * Math.PI, false);
ctx.stroke();
[/cc]
中心が(250, 250)で半径が128の0から2πの範囲で円弧を描きます。

回転させる

[cc lang='js']
ctx.rotate(30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 500);
ctx.stroke();
[/cc]
始点が(0, 0)で終点が(500, 500)の
直線を(0, 0)を中心に30°回転します。

移動させる

[cc lang='js']
ctx.translate(250, 250);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 500);
ctx.stroke();
[/cc]
translateで線を(250, 250)に並行移動します。

canvasの領域を消す

[cc lang='js']
ctx.clearRect(0, 0, 500, 500);
[/cc]
(0, 0)で縦と横が500の領域を消します。

デモについて

HTML側

[cc lang='html']

canvas demo

[/cc]

JavaScript側

canvas.js
[cc lang='js']
function drawLine(ctx, p1, p2) {
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}

function draw(ctx, p1, p2, n) {
var p3 = {}, p4 = {}, p5 = {};
p3.x = (2 * p1.x + p2.x) / 3;
p3.y = (2 * p1.y + p2.y) / 3;
p4.x = (p1.x + 2 * p2.x) / 3;
p4.y = (p1.y + 2 * p2.y) / 3;

function main(ctx, n) {
var p1 = {x: 100, y: 160};
var p2 = {x: 400, y: 160};
var p3 = {x: 250, y: 420};
draw(ctx, p1, p2, n);
draw(ctx, p2, p3, n);
draw(ctx, p3, p1, n);
}
[/cc]