Canvasではねさせたボールに残像をつける その2

Canvasではねさせたボールに残像をつける - みかづきブログ その3

Canvasでボールをはねさせる - みかづきブログ その3

よく考えると 前回つくったもの は残像とは言いがたいものでした。（マリオカートのゴーストみたいなものをイメージしてました）

今回は、前回までの結果に少し透過をかけて合成することによって、いわゆるひとつの残像的演出をつくります。

JavaScript

(function(win, doc, ns) {

    "use strict";

    var ticker      = new ns.Ticker(60),
        ball        = new ns.Ball({
            x   : 200,
            y   : 100,
            r   : 10,
            v   : 800,
            deg : 10
        }),
        canvas = doc.getElementById("canvas"),
        ctx    = canvas.getContext("2d"),
        sub    = doc.createElement("canvas"), // 前回までの描画結果を保存するためのcanvas
        sCtx   = sub.getContext("2d"),
        fps    = doc.getElementById("fps");

    setup();

    function setup() {
        canvas.width  = sub.width = win.innerWidth;
        canvas.height = sub.height = win.innerHeight;

        ball.appendTo(canvas);

        win.addEventListener("resize", function() {
            ball.appendTo(canvas);
        }, false);

        ticker.addEventListener("tick", function(evt) {
            fps.innerHTML = evt.measuredFPS;
            update(evt.delta);
            draw();
        });

        ticker.start();
    }

    function update(delta) {
        ball.move(delta);
    }

    function draw() {
        canvas.width = win.innerWidth;
        canvas.height = win.innerHeight;

        // 前回までの描画結果を描く
        ctx.drawImage(sub, 0, 0);
        
        ctx.fillStyle = "#83c287";
        ball.draw(ctx);
        
        // 描画結果を保存
        sub.width = win.innerWidth;
        sub.height = win.innerHeight;
        sCtx.globalAlpha = 0.9;
        sCtx.drawImage(canvas, 0, 0);
    }

})(this, document, App);

DEMO

これが、俗にいう残像的演出ですね。わからないですけど。
今回は以上です。