HTML5 - Bringing Out Your Inner Artist: The Canvas - drawing rectangle

Head First HTML5 Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML5 Programming (Elisabeth Robson (著)、Eric Freeman (著)、O'Reilly Media)の Chapter 7.(Bringing Out Your Inner Artist: The Canvas)、PSEUDO-CODE MAGNETS(No. 4810) を取り組んでみる。

PSEUDO-CODE MAGNETS(No. 4810)

コード(Emacs)

HTML5

<canvas id="canvas0" width="600" height="600" style="border:solid brown; border-radius:10px"></canvas>
<br>
<button id="draw0">draw</button>
<button id="clear0">clear</button>
<script src="sample1.js"></script>

JavaScript

let btn0 = document.querySelector('#draw0'),
    btn1 = document.querySelector('#clear0');

let canvas = document.querySelector('#canvas0'),
    context = canvas.getContext('2d'),
    width = canvas.width,
    height = canvas.height;

let drawSquare = (canvas, context) => {
    let w = Math.floor(Math.random() * width),
        h = Math.floor(Math.random() * height),
        x = Math.floor(Math.random() * width - w / 2),
        y = Math.floor(Math.random() * height - h / 2),
        r = Math.floor(Math.random() * 256),
        g = Math.floor(Math.random() * 256),
        b = Math.floor(Math.random() * 256);

    context.fillStyle = `rgb(${r}, ${g}, ${b})`;
    context.fillRect(x, y, w, h);
};
let draw = () => {
    drawSquare(canvas, context);
};


btn0.onclick = draw;

btn1.onclick = () => {
    context.clearRect(0, 0, width, width);
};

draw();