Canvas destination-atop 習作

昨日は Canvasで基本的な図形の描画 を行いましたが、今回は昨日つくったものをマスク的につかってみたいと思います。

Canvas rect 習作 - みかづきブログ その3

DEMO

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var img = new Image(),
        main = doc.getElementById("main"),
        mainCtx = main.getContext("2d"),
        sub = doc.createElement("canvas"),
        subCtx = sub.getContext("2d"),
        i = 0,
        WIDTH = 250,
        HEIGHT = 250,
        SIZE = 10,
        INTERVAL = 10;
    
    main.width = sub.width = WIDTH;
    main.height = sub.height = HEIGHT;
    
    img.onload = function() {
        build(0);
    };
    
    img.src = "http://jsrun.it/assets/y/l/w/H/ylwHO.jpeg";
    
    setInterval(function() {
        main.width = WIDTH;
        mainCtx.drawImage(img, 0, 0, WIDTH, HEIGHT);
        mainCtx.globalCompositeOperation = "destination-atop";
        mainCtx.drawImage(sub, 0, 0);
    }, 1000 / 24);
    
    function build(i) {
        var height = HEIGHT / SIZE,
            max = (i + 1 < height) ? (i + 1) : height;
        
        (function setRect(j) {
            if (j < max) {
                subCtx.rect((i -j) * SIZE, j * SIZE, SIZE, SIZE);
                subCtx.fill();
                setTimeout(function() {
                    setRect(++j);
                }, INTERVAL);
            } else {
                if ((i - HEIGHT / SIZE) * SIZE < win.innerWidth) {
                    build(++i);
                }
            }
        })(0);
    }
    
})(this, document);

ちょいとばかし解説

昨日つくったものをマスクとしてつかっています。
canvasは2つあって、昨日つくったcanvasはマスク計算用として使いDOM上には置いていません。
DOM上においてあるcanvasがdrawImageする際のイメージソースとして活用しています。

今回は以上です。