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

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)、CODE MAGNETS(No. 5104)を解いてみる。

その他参考書籍

• Head First HTML and CSS

CODE MAGNETS(No. 5104)

HTML5 (BBEdit, Emacs)

<style>
canvas {
    border: 1px solid black;
}
</style>
<h1>TweetShirt</h1>
<canvas width="600" height="200" id="tshirtCanvas">
  <p>Plead upgrade your browser to use TweetShirt!</p>
</canvas>
<form>
  <p>
    <label for="backgroundColor">Select background color:</label>
    <select id="backgroundColor">
      <option value="white" selected="selected">White</option>
      <option value="black">Black</option>
    </select>
  </p>
  <p>
    <label for="shape">Circles or squares?:</label>
    <select id="shape">
      <option value="none" selected="selected">Neither</option>
      <option value="circles">Circles</option>
      <option value="squares">Squares</option>          
    </select>
  </p>
  <p>
    <label for="foregroundColor">Select text color:</label>
    <select id="foregroundColor">
      <option value="black" selected="selected">Black</option>
      <option value="white">White</option>
    </select>
  </p>
  <p>
    <label for="tweets">Pick a tweet:</label>
    <select id="tweets">
    </select>
  </p>
  <p>
    <input type="button" id="previewButton" value="Preview">
  </p>
</form>
<script>
var previewHandler = function () {
    var canvas = document.getElementById('tshirtCanvas'),
        context = canvas.getContext('2d'),
        selectObj = document.getElementById('shape'),
        index = selectObj.selectedIndex,
        shape = selectObj[index].value,
        i,
        max = 20;

    fillBackgroundColor(canvas, context);
    if (shape === 'squares') {
        for (i = 0; i < max; i += 1) {
            drawSquare(canvas, context);
        }
    } else if (shape === 'circles') {
        for (i = 0; i < max; i += 1) {
            drawCircle(canvas, context);
        }
    }
    drawText(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);
    },
    drawCircle = function (canvas, context) {
        var radius = Math.floor(Math.random() * 40),
            x = Math.floor(Math.random() * canvas.width),
            y = Math.floor(Math.random() * canvas.height);

        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, true);

        context.fillStyle = 'lightblue';
        context.fill();
    },
    drawText = function (canvas, context) {
        var selectObj = document.getElementById('foregroundColor'),
            index = selectObj.selectedIndex,
            fgColor = selectObj[index].value;

        context.fillStyle = fgColor;
        context.font = 'bold 1em sans-serif';
        context.textAlign = 'left';        
        context.fillText('I saw this tweet', 20, 40);

        context.font = 'bold 1em sans-serif';
        context.textAlign = 'right';
        context.fillText('and all I got was this lousy t-shirt!',
                         canvas.width - 20, canvas.height-40);
    };

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

    button.onclick = previewHandler;
};
</script>

TweetShirt

Plead upgrade your browser to use TweetShirt!

Select background color: White Black

Circles or squares?: Neither Circles Squares

Select text color: Black White

Pick a tweet: