HTML5 Canvas 基本の例と図形、アニメーション

基本の例

<canvas id="basicCanvas" width="400" height="400"></canvas>
<script>
    var basicCanvas = document.getElementById('basicCanvas');
    var basicContext = basicCanvas.getContext('2d');

    // 四角形を描画
    basicContext.fillStyle = 'blue';
    basicContext.fillRect(50, 50, 100, 100);

    // 線で四角形を描画
    basicContext.strokeStyle = 'red';
    basicContext.lineWidth = 5;
    basicContext.strokeRect(200, 50, 100, 100);

    // 円を描画
    basicContext.beginPath();
    basicContext.arc(150, 250, 50, 0, Math.PI * 2, false);
    basicContext.fillStyle = 'green';
    basicContext.fill();
    basicContext.lineWidth = 5;
    basicContext.strokeStyle = '#003300';
    basicContext.stroke();
</script>
                

図形の描画

<canvas id="shapesCanvas" width="400" height="400"></canvas>
<script>
    var shapesCanvas = document.getElementById('shapesCanvas');
    var shapesContext = shapesCanvas.getContext('2d');

    // 三角形を描画
    shapesContext.beginPath();
    shapesContext.moveTo(50, 150);
    shapesContext.lineTo(150, 50);
    shapesContext.lineTo(150, 150);
    shapesContext.closePath();
    shapesContext.fillStyle = 'purple';
    shapesContext.fill();

    // 半円を描画
    shapesContext.beginPath();
    shapesContext.arc(250, 100, 50, 0, Math.PI, false);
    shapesContext.closePath();
    shapesContext.fillStyle = 'orange';
    shapesContext.fill();

    // 星を描画
    function drawStar(cx, cy, spikes, outerRadius, innerRadius) {
        var rot = Math.PI / 2 * 3;
        var x = cx;
        var y = cy;
        var step = Math.PI / spikes;

        shapesContext.beginPath();
        shapesContext.moveTo(cx, cy - outerRadius);
        for (var i = 0; i < spikes; i++) {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            shapesContext.lineTo(x, y);
            rot += step;

            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            shapesContext.lineTo(x, y);
            rot += step;
        }
        shapesContext.lineTo(cx, cy - outerRadius);
        shapesContext.closePath();
        shapesContext.lineWidth = 5;
        shapesContext.strokeStyle = 'gold';
        shapesContext.stroke();
        shapesContext.fillStyle = 'yellow';
        shapesContext.fill();
    }

    drawStar(300, 300, 5, 50, 25);
</script>
                

アニメーション

<canvas id="animationCanvas" width="400" height="400"></canvas>
<script>
    var animationCanvas = document.getElementById('animationCanvas');
    var animationContext = animationCanvas.getContext('2d');

    var x = 0;
    var y = 200;
    var dx = 2;

    function drawCircle() {
        animationContext.clearRect(0, 0, animationCanvas.width, animationCanvas.height);
        animationContext.beginPath();
        animationContext.arc(x, y, 20, 0, Math.PI * 2, false);
        animationContext.fillStyle = 'blue';
        animationContext.fill();
        animationContext.strokeStyle = 'black';
        animationContext.stroke();
    }

    function update() {
        x += dx;
        if (x > animationCanvas.width || x < 0) {
            dx = -dx;
        }
        drawCircle();
        requestAnimationFrame(update);
    }

    update();
</script>