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

2011年03月07日

はじめに

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

Canvasについて

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

Canvasを作る

<canvas id="main" width="500" height="500" ></canvas>

canvasタグでcanvasを作ります。

コンテキストの取得

var canvas = document.getElementById('main');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}

canvasタグの要素を取得してコンテキストの取得をします。

線を描く

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

取得したコンテキストに対して
beginPathで現在のパスをリセットします。
moveToで線の始点の位置を
lineToで線の終点の位置を指定します。
strokeで線を引きます。

円を描く

ctx.beginPath();
ctx.arc(250, 250, 128, 0, 2 * Math.PI, false); 
ctx.stroke();

中心が(250, 250)で半径が128の0から2πの範囲で円弧を描きます。

回転させる

ctx.rotate(30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 500);
ctx.stroke();

始点が(0, 0)で終点が(500, 500)の
直線を(0, 0)を中心に30°回転します。

移動させる

ctx.translate(250, 250);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 500);
ctx.stroke();

translateで線を(250, 250)に並行移動します。

canvasの領域を消す

ctx.clearRect(0, 0, 500, 500);

(0, 0)で縦と横が500の領域を消します。

デモについて

HTML側

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas demo</title>
<script src="canvas.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
    var canvas = document.getElementById('main');
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        main(ctx, 3);
    }
}
</script>
</head>
<body>
<canvas id="main" width="500" height="500" style="border: 1px solid;"></canvas>
</body>
</html>

JavaScript側

canvas.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;
    
    var x = p2.x - p1.x;
    var y = - (p2.y - p1.y);
    var dis = Math.sqrt(x * x + y * y) / Math.sqrt(3);
    var p, pi;
    if (x >= 0) {
        p = p1;
        rad =  Math.PI / 6;
    } else {
        p = p2;
        rad = - Math.PI / 6;
    }
    var angle = Math.atan(y / x) + rad;
    p5.x = p.x + dis * Math.cos(angle);
    p5.y = p.y - dis * Math.sin(angle);
    if (n == 0) {
        drawLine(ctx, p1, p3, p1);
        drawLine(ctx, p3, p5, p3);
        drawLine(ctx, p5, p4, p5);
        drawLine(ctx, p4, p2, p4);
    } else {
        n--;
        draw(ctx, p1, p3, n);
        draw(ctx, p3, p5, n);
        draw(ctx, p5, p4, n);
        draw(ctx, p4, p2, n);
    }
}

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