HTML5 - Bringing Out Your Inner Artist: The Canvas - (beginPath, lineTo, arc, radian, Smiley Face)

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)、INTERMISSION(No. 5032) を取り組んでみる。

INTERMISSION(No. 5032)

コード(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="sample3.js"></script>

JavaScript

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

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

    context.beginPath();
    context.arc(300, 300, 200, 0, 2 * Math.PI, true);
    context.fillStyle = '#ffffcc';
    context.fill();
    context.stroke();

    context.beginPath();
    context.arc(200, 250, 25, 0, 2 * Math.PI, true);
    context.stroke();

    context.beginPath();
    context.arc(400, 250, 25, 0, 2 * Math.PI, true);
    context.stroke();

    context.beginPath();
    context.moveTo(300, 300);
    context.lineTo(300, 350);
    context.stroke();
    
    context.beginPath();
    context.arc(300, 350, 75, 20 * 2 * Math.PI / 360, 160 * 2 * Math.PI / 360, false);
    context.stroke();
};    

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

drawSmileyFace();