Hatena::Groupjavascript

lnzntのJavaScript日記 このページをアンテナに追加 RSSフィード

2011年06月29日(水)

Canvas API (復習1) img 要素の Canvas への描き込み

| 21:23 |  Canvas API (復習1) img 要素の Canvas への描き込み - lnzntのJavaScript日記 を含むブックマーク はてなブックマーク -  Canvas API (復習1) img 要素の Canvas への描き込み - lnzntのJavaScript日記  Canvas API (復習1) img 要素の Canvas への描き込み - lnzntのJavaScript日記 のブックマークコメント

すっかり HTML5JavaScript のことを忘れてしまった(反省)ので復習です。

img 要素の画像を Canvas に描き込むサンプルです。(Firefox5 (Linux) で確認)

img 要素の画像 01.pngcanvas 要素の領域に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>サンプル</title>

    <script>
        window.addEventListener('load', function() {
            var img    = document.getElementById('img1');
            var canvas = document.getElementById('canvas1');
            var ctx    = canvas.getContext('2d');

            canvas.width  = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);   /* img 要素の Canvas への描き込み */
        }, false);
    </script>
</head>
<body>
    <img id="img1" src="01.png" />
    <canvas id="canvas1"></canvas>
</body>
</html>

PNG の他、JPEGGIF でも表示できます。

PNG などの場合、透明部分のある画像も表示できます。

アニメーションGIF は、最初のフレーム(?) が表示されます。アニメーションではありません。

canvas に表示されている画像はビットマップなので、その上に ctx を使って図形などを描いていけます。

----

画像を表示する img 要素 2つと canvas 要素 1つのサンプルです。

img 要素の画像をクリックするとその画像を canvas に表示します。

canvas 要素の画像をクリックすると画像を消去(背景色で塗り潰し)します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>サンプル</title>
    <style>
        canvas {
            background-color:   #cccccc;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var img1   = document.getElementById('img1');
            var img2   = document.getElementById('img2');
            var canvas = document.getElementById('canvas1');
            var ctx    = canvas.getContext('2d');

            var copy_image = function(src_image) {
                var img = src_image;    /* img 要素オブジェクト */
                var x = 0;
                var y = 0;

                canvas.width  = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, x, y);   /* img 要素の Canvas への描き込み */
            };

            var clear = function() {
                var w = canvas.width;
                var h = canvas.height;
                ctx.fillStyle = document.defaultView
                                .getComputedStyle(canvas, null)
                                .getPropertyValue('background-color');
                ctx.fillRect(0, 0, w, h);
            }

            /*
                img 要素をクリックすると、canvas 要素でその画像を表示する
            */
            img1.addEventListener('click', function() {
                copy_image(this);
            }, false);
            img2.addEventListener('click', function() {
                copy_image(this);
            }, false);

            /*
                canvas 要素をクリックすると、背景色で塗り潰す
            */
            canvas.addEventListener('click', clear, false);
        }, false);
    </script>
</head>

<body>

<img id="img1" src="01.jpg" />
<img id="img2" src="02.jpg" />
<canvas id="canvas1"></canvas>

</body>
</html>

ここまで書くのも悪戦苦闘。本っ当に忘れてしまった。。。。

----

参考にしたサイト

参考にした書籍

Google API Expertが解説するHTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック