CX's Hatena Blog

はてなブログを使ってみるテスト

はてなブログで JavaScript を使ってみるテスト(その2)

はてなブログ内で HTML5 + Canvas が使えるかのテスト。

ソース

<canvas id="world-20130911-001" width="440" height="440"></canvas>
<script type="text/javascript">
var X_MAX = 440;
var Y_MAX = 440;
var R = 220;

function draw() {
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    drawScreen( ctx );
    drawGraph( ctx );
    drawSin( ctx );
}

function drawScreen( ctx ) {
    ctx.fillStyle = "rgb( 0, 0, 0 )";
    ctx.fillRect( 0, 0, X_MAX, Y_MAX );
}

function drawGraph( ctx ) {
    ctx.strokeStyle = "rgb( 0, 127, 0 )";
    ctx.beginPath();
    var x, y;
    for (x = 0; x <= X_MAX; x += 20) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, Y_MAX);
    }
    for (y = 0; y <= Y_MAX; y += 20) {
        ctx.moveTo(0, y);
        ctx.lineTo(X_MAX, y);
    }
    ctx.stroke();
}

function drawSin( ctx ) {
    ctx.strokeStyle = "rgb( 0, 255, 0 )";
    ctx.beginPath();
    ctx.moveTo(0, R);
    var x, y;
    for (x = 0; x <= X_MAX; x += 20) {
        y = R - R * Math.sin( 2 * Math.PI * ( x / X_MAX ) )
        ctx.lineTo(x, y);
    }
    ctx.stroke();
}

draw();
</script>

実行結果