HTML5 - Bringing Out Your Inner Artist: The Canvas(Image, drawImage 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)、EXERCISE(No. 5172)を解いてみる。

その他参考書籍

• Head First HTML and CSS

EXERCISE(No. 5172)

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">
      <option value="tweet1" selected="selected">tweet1</option>
      <option value="tweet2">tweet2</option>
    </select>
  </p>
  <p>
    <input type="button" id="previewButton" value="Preview">
  </p>
</form>
<script>
var button = document.getElementById('previewButton'),
    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);
        drawBird(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);
        
        selectObj = document.getElementById('tweets');
        index = selectObj.selectedIndex;
        tweet = selectObj[index].value;
        context.font = '1.2em italic serif';
        context.textAlign = 'left';
        context.fillText(tweet, 30, 100);
        
    },
    drawBird = function (canvas, context) {
        var twitterBird = new Image();
        
        twitterBird.src =
            'http://mkamimura.com/kamimura_blog/html5/' +
            'head_first_html5_programming/chapter7/twitterBird.png';       
        twitterBird.onload = function () {
            context.drawImage(twitterBird, 20, 120, 70, 70);
        };
    };

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: tweet1 tweet2