Canvasでスポットライト的なものをつくる

kimizuka.hatenablog.com

See the Pen Transition like the ending by kimmy (@kimmy) on CodePen.

以前、CSSでアニメのエンディングのようなトランジションをつくったことがありましたが、今回はこれをCanvasでつくります。

DEMO

クリックすると開いたり閉じたりします

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var arc = {
    isOpen : false,
    size : 0,
    toggle : function() {
        if (this.isOpen) {
            $(this).animate({
                size: 0
            }, 1000, function() {
                 this.isOpen = false;
            });
        } else {
            $(this).animate({
                size: 160
            }, 1000, function() {
                this.isOpen = true;
            });
        }
    }
};

canvas.addEventListener("click", function() {
    arc.toggle();
}, false);

setInterval(draw, 1000 / 24);

function draw() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    ctx.save();
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();        
        
    drawArc(arc.size);
}

function drawArc(size) {   
    ctx.save();
        ctx.beginPath();
            ctx.fillStyle = "#fff";
            ctx.arc(canvas.width / 2, canvas.height / 2, size, 0, Math.PI * 2, true);
        ctx.fill();
    ctx.restore();
}

HTML

<canvas id="canvas"></canvas>

SCSS

@import "compass/reset";

#canvas {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}