HTML5 - Bringing Out Your Inner Artist: The Canvas(arc method)

Head First HTML5 Programming
Building Web Apps with Javascript
(O'Reilly Media)
Eric Freeman (著), Elisabeth Robson (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• HTML5 (マークアップ言語)
• JavaScript (プログラミング言語)

Head First HTML5 Programming: Building Web Apps with Javascript(Eric Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)のChapter 7(Bringing Out Your Inner Artist: The Canvas)、INTERMISSION(No. 5032)を解いてみる。

その他参考書籍

• Head First HTML and CSS

INTERMISSION(No. 5032)

HTML5 (BBEdit, Emacs)

<style>
  canvas {
      border: 1px solid black;
  }
</style>    
<canvas id="smiley" width="600" height="600">
</canvas>
<p>
  <button id="draw">draw</button>
</p>
<script>
var draw = document.getElementById('draw'),
    degreesToRadians = function (degrees) {
        return degrees * Math.PI / 180;
    };
    drawSmileFace = function () {
        var canvas = document.getElementById('smiley'),
            context = canvas.getContext('2d');

        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, degreesToRadians(160),
                    degreesToRadians(20), true);
        context.stroke();
    };

draw.onclick = drawSmileFace;
</script>