HTML5 - Bringing Out Your Inner Artist: The Canvas(fillStyle method,background color)

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)、SHARPEN YOUR PENCIL(No. 4854)を解いてみる。

その他参考書籍

• Head First HTML and CSS

SHARPEN YOUR PENCIL(No. 4854)

JavaScript (BBEdit, Emacs)

var previewHandler = function () {
    var canvas = document.getElementById('tshirtCanvas'),
        context = canvas.getContext('2d'),
        selectObj = document.getElementById('shape'),
        index = selectObj.selectedIndex,
        shape = selectObj[index].value,
        squares;

    fillBackgroundColor(canvas, context);
    if (shape === 'squares') {
        for (squares = 0; squares < 20; squares += 1) {
            drawSquare(canvas, context);
        }
    }
},
    fillBackgroundColor = function (canvas, context) {
        var selectObj = document.getElementById('backgroundColor'),
            index = selectObj.selectedIndex,
            bgColor = selectObj.options[index].value;

        context.fillStyle = bgColor;
        context.fillRect(0, 0, 600, 200);
    },
    drawSquare = function (canvas, context) {
        var w = Math.random() * 40,
            x = Math.random() * canvas.width,
            y = Math.random() * canvas.height;
        
        context.fillStyle = 'lightblue';
        context.fillRect(x, y, w, w);
    };

window.onload = function () {
    var button = document.getElementById('previewButton');

    button.onclick = previewHandler;
};

index4854.html