JavaScript - Browser - Drawing on Canvas(A Bouncing Ball)

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(A Bouncing Ball)を取り組んでみる。

Exercises(A Bouncing Ball)

コード(Emacs)

HTML5

<canvas width="600" height="300" style="border:solid" id="canvas0" ></canvas>
<script src="sample3.js"></script>

JavaScript

'use strict';
let canvas = document.querySelector('#canvas0'),
    ctx = canvas.getContext('2d'),
    width = canvas.width,
    height = canvas.height,
    cx = width / 2,
    cy = height / 2,
    r = 20,
    speed = 5;

ctx.fillStyle = 'green';

let draw = (cx) => {
    if (cx > (width - r) || cx < r) {
        speed *= -1;
    }
    ctx.beginPath(cx, cy);
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
};

setInterval(() => {
    ctx.clearRect(0, 0, width, height);
    cx += speed;
    draw(cx);
}, 10);