読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

JavaScript

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;
}