JavaScript - Browser - Drawing on Canvas(Shapes)

Eloquent JavaScript

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari、Firefox(Web browser)

Eloquent JavaScript(Marijn Haverbeke 著、No Starch Press)のPart 2(Browser)、Chapter 16(Drawing on Canvas)、Exercises(Shapes)を取り組んでみる。

Exercises(Shapes)

コード(Emacs)

HTML5

<canvas width="600" height="300" id="trapezoid0" ></canvas>
<br>
<canvas width="600" height="300" id="diamond0" ></canvas>
<br>
<canvas width="600" height="300" id="zigzagging0" ></canvas>
<br>
<canvas width="600" height="300" id="spiral0" ></canvas>
<br>
<canvas width="600" height="300" id="star0" ></canvas>
<script src="sample1.js"></script>

JavaScript

'use strict';
let trapezoid = (pos=[200, 100]) => {
    let canvas = document.querySelector('#trapezoid0'),
        w = canvas.width,
        h = canvas.height,
        ctx = canvas.getContext('2d');

    ctx.moveTo(pos[0], pos[1]);
    ctx.lineTo(w - pos[0], pos[1]);
    ctx.lineTo(w - pos[0] + 50, h - pos[1]);
    ctx.lineTo(pos[0] - 50, h - pos[1]);
    ctx.closePath();
    ctx.strokeStyle = 'green';
    ctx.stroke();
};

trapezoid();

let diamond = (radians = Math.PI / 4, color='red') => {
    let canvas = document.querySelector('#diamond0'),
        w = canvas.width,
        h = canvas.height,
        ctx = canvas.getContext('2d');

    ctx.fillStyle = color;
    ctx.translate(w / 2 - 150 * Math.cos(radians), h / 2);
    ctx.rotate(-radians);    
    ctx.fillRect(0, 0, 150, 150);
};

diamond();

let zigzagging = (pos=[200, 100]) => {
    let canvas = document.querySelector('#zigzagging0'),
        w = canvas.width,
        h = canvas.height,
        ctx = canvas.getContext('2d'),
        l = (h - pos[1]) / 12;

    ctx.moveTo(pos[0], pos[1]);
    let left = pos[0],
        right = w - pos[0],
        y = pos[1] + l;
    for (let i = 0; i < 12; i += 1) {
        if (i % 2 === 0) {
            ctx.lineTo(right, y);
        } else {
            ctx.lineTo(left, y);
        }
        y += l;
    }
    ctx.strokeStyle = 'purple';
    ctx.stroke();
};

zigzagging();

let spiral = () => {
    let canvas = document.querySelector('#spiral0'),
        w = canvas.width,
        h = canvas.height,
        ctx = canvas.getContext('2d');

    let cx = w / 2,
        cy= h / 2,
        r = 20;
    
    ctx.moveTo(cx + r, cy);
    
    for (let i = 0; i < 10; i += 1) {
        if (i % 2 === 0) {
            ctx.arc(cx, cy, r, 0, Math.PI);
            r += 10;
            cx += 10;
        } else {
            ctx.arc(cx, cy, r, Math.PI, 2 * Math.PI);
            r += 10;
            cx -= 10;
        }        
    }
    ctx.strokeStyle = 'blue';
    ctx.stroke();
};

spiral();

let star = (color='yellow') => {
    let canvas = document.querySelector('#star0'),
        w = canvas.width,
        h = canvas.height,
        ctx = canvas.getContext('2d');    
    
    let cx = w / 2,
        cy = h / 2,
        r1 = 125,
        r2 = 10,
        angle = 2 * Math.PI / 8;

    ctx.moveTo(cx + r1, cy);
    for (let a = 0; a < 2 * Math.PI ; a += angle) {
        ctx.quadraticCurveTo(cx + r2 * Math.cos(a + angle / 2),
                             cy + r2 * Math.sin(a + angle / 2),
                             cx + r1 * Math.cos(a + angle),
                             cy + r1 * Math.sin(a + angle))
    }
    ctx.fillStyle = color;
    ctx.fill();
};

star();