JS + Canvasで画像をプルプルふるわせる。

目次

1. 概要
2. デモ
3. ソース
4. その他

概要

canvas + JSで画像をプルプル震わせる。

デモ

ソース

(function(){
    
    var image_url = "/path/to/image_url.png"
    var canavs    = document.getElementById("canvas");
    var context = canvas.getContext('2d');
    var event_btn      = document.getElementById("event_flg");
    var base_image  = {};
    var event_flg = true;
    var interval = 10;
    
    //振れ幅の設定
    var imPadding = {
        x : 50, y: 50
    };
    
    //画像 initialization
    var image = new Image();
    image.src = image_url;
    image.onload = function(){
        canvas.width = image.width    + imPadding.x;
        canvas.height = image.height + imPadding.y;
        pullImagePixels();
    }
    
    function pullImagePixels(){
        if(event_flg){
            context.clearRect(0, 0, canvas.width, canvas.height)
            context.drawImage(image, 
                              getRandomArbitary(0,imPadding.x),
                              getRandomArbitary(0,imPadding.y));
        }
        setTimeout(pullImagePixels,interval);
    }
    
    function getRandomArbitary(min, max) {
        return parseInt(Math.random() * (max - min) + min,10);
    }
    
    //ボタンはんどら
    event_btn.addEventListener("click",function(){
        if(!event_flg){
            event_btn.innerHTML = "■";
        }else{
            event_btn.innerHTML = "▶︎";
        }
        event_flg = (!event_flg);
    });    
    
})();

<canvas id="canvas"></canvas>
<button id="event_flg">■</button>

その他

setTimeout使ってるあたりがダサいですね。Promiseが使えるよう勉強します。