Teilen Sie Beispiele für die Implementierung von Regenanimationen in Canvas-js-Tutorial-php.cn

Ich habe eine mit Canvas auf Codepen erstellte Regeneffektanimation gesehen, die sehr interessant war. Ich habe einige Nachforschungen angestellt und werde hier die Implementierungstechniken vorstellen.

Screenshot des Effekts:

Grundlagen der Leinwandanimation

Wie Sie wissen, ist Canvas eigentlich nur ein Zeichenbrett. Wir können die Canvas-API verwenden, um verschiedene Grafiken darauf zu zeichnen.

Canvas 2D API: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

Dann sind die Schritte zum Zeichnen von Animationen mit Canvas:

Zeichnen Sie den ersten Grafikrahmen (mit API-Zeichnung)
Löschen Sie die Zeichenfläche (wenden Sie clearRect() oder fillRect() an)
Zeichnen Sie den nächsten Frame der Animation

Womit wird die Zeichenzeit jedes Frames der Animation gesteuert? Es ist für jeden leicht, an window.setInterval() und window.setTimeout() zu denken. Ja, Sie können diese beiden auch verwenden. Darüber hinaus erschien später eine neue Methode: window.requestAnimationFrame(callback).

requestAnimationFrame teilt dem Browser mit, dass Sie eine Animation zeichnen möchten. Lassen Sie den Browser Ihre angegebene Methode (Callback) aufrufen, um Ihre Animation zu zeichnen, wenn er sie neu zeichnen möchte.

Die Verwendungsmethode ist wie folgt:

function anim() {
    ctx.fillStyle = clearColor;
    ctx.fillRect(0,0,w,h);
    for(var i in drops){
        drops[i].draw();
    }
    requestAnimationFrame(anim);
}

Nach dem Login kopieren

Im Allgemeinen kann durch die erste Verwendung von requestAnimationFrame die Häufigkeit des Zeichnens von Animationen mit der Häufigkeit des Neuzeichnens des Browsers konsistent gehalten werden . Leider ist die Kompatibilität von requestAnimationFrame noch nicht sehr gut. IE9 und niedriger sowie Addroid 4.3 und niedriger scheinen dieses Attribut nicht zu unterstützen. Browser, die dies nicht unterstützen, müssen aus Kompatibilitätsgründen setInterval oder setTimeout verwenden.

Regentropfen-Falleffekt

Lassen Sie uns zunächst darüber sprechen, wie Sie den Regentropfen-Falleffekt erzeugen. Der Regentropfen ist eigentlich ein Rechteck, und dann wird das Nachbild hinzugefügt. Man kann sagen, dass das Zeichnen von Nachbildern der Schlüssel zum Verbleib von Regentropfen ist. Das Nachbild ist ein Effekt, der dadurch entsteht, dass in jedem Bild in Vorwärtsrichtung ein durchscheinender Hintergrund und ein Rechteck gezeichnet und dann die zuvor gezeichneten Grafiken überlagert werden. Da die Grafiken in der Vorwärtsrichtung zuletzt gezeichnet werden, erscheinen sie heller und die Grafiken im Hintergrund sind stärker überlagert, sodass sie optisch abgeschwächt werden. Insgesamt wirkt es wie ein Nachbild. Der Schlüssel hier ist, einen transparenten Hintergrund zu zeichnen, da sonst der Overlay-Effekt nicht erzeugt wird.

Dann zeichnen wir einen Regentropfen. Bereiten Sie zuerst ein Zeichenbrett vor:

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霓虹雨</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
        .bg {
            background: #000;
            overflow: hidden;
        }
    </style>

</head>
<body class="bg">
<canvas id="canvas-club"></canvas>
<script type="text/javascript" src="raindrop.js"></script>
</body>
</html>

Nach dem Login kopieren

Ich zeichne die Animation in der js-Datei (raindrop.js), der Code ist wie folgt:

var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = &#39;rgba(0, 0, 0, .1)&#39;;//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function RainDrop(){}
//雨滴对象 这是绘制雨滴动画的关键
RainDrop.prototype = {
    init:function(){
        this.x =  random(0, w);//雨滴的位置x
        this.y = 0;//雨滴的位置y
        this.color = &#39;hsl(180, 100%, 50%)&#39;;//雨滴颜色 长方形的填充色
        this.vy = random(4, 5);//雨滴下落速度
        this.hit = random(h * .8, h * .9);//下落的最大值
        this.size = 2;//长方形宽度
    },
    draw:function(){
        if (this.y < this.hit) {
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.size, this.size * 5);//绘制长方形，通过多次叠加长方形，形成雨滴下落效果
        }
        this.update();//更新位置
    },
    update:function(){
        if(this.y < this.hit){
            this.y += this.vy;//未达到底部，增加雨滴y坐标
        }else{
            this.init();
        }
    }
};

function resize(){
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
}

//初始化一个雨滴
var r = new RainDrop();
r.init();

function anim() {
    ctx.fillStyle = clearColor;//每一帧都填充背景色
    ctx.fillRect(0,0,w,h);//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
    r.draw();//绘制雨滴
    requestAnimationFrame(anim);//控制动画帧
}

window.addEventListener("resize", resize);
//启动动画
anim();

Nach dem Login kopieren

Welleneffekt

Zeichnen Sie dann den Welleneffekt. Ähnlich wie beim Zeichnen von Regentropfen wird der Effekt eines inneren Schattens erzeugt, indem das vorherige Bild mit einem transparenten Hintergrund überlagert wird.

Der Code lautet wie folgt (rippling.js):

var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = &#39;rgba(0, 0, 0, .1)&#39;;//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function Rippling(){}
//涟漪对象 这是涟漪动画的主要部分
Rippling.prototype = {
    init:function(){
        this.x = random(0,w);//涟漪x坐标
        this.y = random(h * .8, h * .9);//涟漪y坐标
        this.w = 2;//椭圆形涟漪宽
        this.h = 1;//椭圆涟漪高
        this.vw = 3;//宽度增长速度
        this.vh = 1;//高度增长速度
        this.a = 1;//透明度
        this.va = .96;//涟漪消失的渐变速度
    },
    draw:function(){
        ctx.beginPath();
        ctx.moveTo(this.x, this.y - this.h / 2);
        //绘制右弧线
        ctx.bezierCurveTo(
            this.x + this.w / 2, this.y - this.h / 2,
            this.x + this.w / 2, this.y + this.h / 2,
            this.x, this.y + this.h / 2);
        //绘制左弧线
        ctx.bezierCurveTo(
            this.x - this.w / 2, this.y + this.h / 2,
            this.x - this.w / 2, this.y - this.h / 2,
            this.x, this.y - this.h / 2);
        
        ctx.strokeStyle = &#39;hsla(180, 100%, 50%, &#39;+this.a+&#39;)&#39;;
        ctx.stroke();
        ctx.closePath();
        this.update();//更新坐标
    },
    update:function(){
        if(this.a > .03){
            this.w += this.vw;//宽度增长
            this.h += this.vh;//高度增长
            if(this.w > 100){
                this.a *= this.va;//当宽度超过100，涟漪逐渐变淡消失
                this.vw *= .98;//宽度增长变缓慢
                this.vh *= .98;//高度增长变缓慢
            }
        } else {
            this.init();
        }

    }
};

function resize(){
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
}

//初始化一个涟漪
var r = new Rippling();
r.init();

function anim() {
    ctx.fillStyle = clearColor;
    ctx.fillRect(0,0,w,h);
    r.draw();
    requestAnimationFrame(anim);
}

window.addEventListener("resize", resize);
//启动动画
anim();

Nach dem Login kopieren

Zusammenfassung

Hier entlang Jeder kann das Ganze verstehen. Sie sollten ein gewisses Verständnis dafür haben, wie man Regeneffekte erzeugt. Der Effekt von Canvas zum Zeichnen von Animationen ist in der Tat auffällig und verbessert den visuellen Effekt des Webs erheblich. Nutzen Sie Ihre eigene Weisheit und ich glaube, Sie können noch mehr wundervolle Animationen erstellen. Dies ist einer der Gründe, warum ich das Web immer mehr mag O(∩_∩)O~~.

Verwandte Empfehlungen:

Apropos Canvas kombiniert mit JavaScript, um Bildspezialeffekte zu erzielen

Interaktive HTML5 Canvas-U-Bahn-Linienkarte Implementierungscode

So verwenden Sie Canvas zum Verarbeiten von Bildern

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Implementierung von Regenanimationen in Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!