Canvasでななめに塗りつぶしていくアニメーション

とても日本語にしにくいのですがつくってみました。

DEMO

JavaScript

(function(win, doc, $) {
    
    "use strict";
    
    var script = doc.createElement("script");
        
    script.onload = main;
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js";
    
    doc.body.appendChild(script);
    
    function main() {
        var DEG = 60, // 45 ~ 90
            MS  = 3000;

        var $win   = $(win),
            canvas = doc.getElementById("canvas"),
            ctx    = canvas.getContext("2d");
        
        var $black = $({
                x : 0,
                y : 0,
                color : "#000"
            }),
            $white = $({
                x : 0,
                y : 0,
                color : "#fff"
            });
        
        (function anim() {
            var l = $win.height() * (1 + Math.abs(Math.tan((90 - DEG / 180) * Math.PI)));
            
            $black.animate({
                x : l,
                y : l * Math.abs(Math.tan((DEG / 180) * Math.PI))
            }, MS, "easeOutCirc", function() {
                $white.animate({
                    x : l,
                    y : l * Math.abs(Math.tan((DEG / 180) * Math.PI))
                }, MS, "easeOutCirc", _replay)
            });
            
            function _replay() {
                $black[0].x = $black[0].y = 0;
                $white[0].x = $white[0].y = 0;
                anim();
            }
        })();
        
        setInterval(draw, 1000 / 24);
        
        function draw() {
            canvas.width  = $win.width();
            canvas.height = $win.height();
            
            ctx.save();
                ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo($black[0].x, 0);
                    ctx.lineTo(0, $black[0].y);
                ctx.closePath();
                ctx.fillStyle = $black[0].color;
                ctx.fill();

                ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo($white[0].x, 0);
                    ctx.lineTo(0, $white[0].y);
                ctx.closePath();
                ctx.fillStyle = $white[0].color;
                ctx.fill();
            ctx.restore();
        }
    }

})(this, document, $);

突貫でつくったので、45〜90度しか対応していません。
今回は以上です。