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

Heim

Web-Frontend

js-Tutorial

Teilen Sie Beispiele für die Implementierung von Regenanimationen in Canvas

小云云

Mar 09, 2018 am 10:49 AM

canvas 下雨动画

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

1 Monate vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

Kraftstufen für jeden Feind & Monster in R.E.P.O.

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Blauer Prinz: Wie man zum Keller kommt

3 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1653

CakePHP-Tutorial

1413

Laravel-Tutorial

1305

PHP-Tutorial

1251

C#-Tutorial

1224

Related knowledge

Animation funktioniert in PowerPoint nicht [Behoben] Feb 19, 2024 am 11:12 AM

Versuchen Sie, eine Präsentation zu erstellen, können aber keine Animation hinzufügen? Wenn Animationen in PowerPoint auf Ihrem Windows-PC nicht funktionieren, hilft Ihnen dieser Artikel weiter. Dies ist ein häufiges Problem, über das sich viele Menschen beschweren. Beispielsweise kann es sein, dass Animationen bei Präsentationen in Microsoft Teams oder bei Bildschirmaufzeichnungen nicht mehr funktionieren. In diesem Leitfaden werden wir verschiedene Fehlerbehebungstechniken untersuchen, die Ihnen dabei helfen, Animationen zu beheben, die in PowerPoint unter Windows nicht funktionieren. Warum funktionieren meine PowerPoint-Animationen nicht? Wir haben festgestellt, dass einige mögliche Gründe dafür, dass die Animation in PowerPoint unter Windows nicht funktioniert, folgende sein können: Aus persönlichen Gründen

CSS-Animation: So erzielen Sie den Flash-Effekt von Elementen Nov 21, 2023 am 10:56 AM

CSS-Animation: Um den Flash-Effekt von Elementen zu erzielen, sind bestimmte Codebeispiele erforderlich. Im Webdesign können Animationseffekte manchmal eine gute Benutzererfahrung auf die Seite bringen. Der Glitzereffekt ist ein gängiger Animationseffekt, der Elemente auffälliger machen kann. Im Folgenden wird erläutert, wie Sie mithilfe von CSS den Flash-Effekt von Elementen erzielen. 1. Grundlegende Implementierung von Flash Zuerst müssen wir die Animationseigenschaft von CSS verwenden, um den Flash-Effekt zu erzielen. Der Wert des Animationsattributs muss den Animationsnamen, die Ausführungszeit der Animation und die Verzögerungszeit der Animation angeben

Nach einer zweijährigen Verzögerung soll der inländische 3D-Animationsfilm „Er Lang Shen: The Deep Sea Dragon' am 13. Juli in die Kinos kommen Jan 26, 2024 am 09:42 AM

Diese Website berichtete am 26. Januar, dass der inländische 3D-Animationsfilm „Er Lang Shen: The Deep Sea Dragon“ eine Reihe aktueller Standbilder veröffentlicht und offiziell angekündigt hat, dass er am 13. Juli in die Kinos kommen wird. Es wird davon ausgegangen, dass „Er Lang Shen: The Deep Sea Dragon“ von Mihuxing (Beijing) Animation Co., Ltd., Horgos Zhonghe Qiancheng Film Co., Ltd., Zhejiang Hengdian Film Co., Ltd., Zhejiang Gongying Film produziert wird Co., Ltd., Chengdu Der von Tianhuo Technology Co., Ltd. und Huawen Image (Beijing) Film Co., Ltd. produzierte und von Wang Jun inszenierte Animationsfilm sollte ursprünglich am 22. Juli 2022 auf dem chinesischen Festland erscheinen . Zusammenfassung der Handlung dieser Seite: Nach der Schlacht der verliehenen Götter nutzte Jiang Ziya die „Liste der verliehenen Götter“, um die Götter zu teilen, und dann wurde die Liste der verliehenen Götter vom himmlischen Gericht unter der Tiefsee von Kyushu versiegelt Geheimes Reich. Tatsächlich gibt es neben der Verleihung göttlicher Positionen auch viele mächtige böse Geister, die in der Liste der verliehenen Götter versiegelt sind.

So richten Sie die PPT-Animation so ein, dass sie zuerst aufgerufen und dann beendet wird Mar 20, 2024 am 09:30 AM

Wir verwenden ppt häufig in unserer täglichen Arbeit. Sind Sie also mit allen Bedienfunktionen in ppt vertraut? Zum Beispiel: Wie werden Animationseffekte in ppt festgelegt, wie werden Umschalteffekte festgelegt und wie lang ist die Effektdauer jeder Animation? Kann jede Folie automatisch abgespielt werden, die PPT-Animation aufrufen und dann verlassen usw. In der heutigen Ausgabe werde ich Ihnen die spezifischen Schritte zum Aufrufen und Verlassen der PPT-Animation mitteilen. Schauen Sie sich diese an. 1. Zuerst öffnen wir ppt auf dem Computer und klicken außerhalb des Textfelds, um das Textfeld auszuwählen (wie im roten Kreis in der Abbildung unten dargestellt). 2. Klicken Sie dann in der Menüleiste auf [Animation] und wählen Sie den Effekt [Löschen] (wie im roten Kreis in der Abbildung dargestellt). 3. Klicken Sie anschließend auf [

Der letzte Trailer zum Netflix-Claymation-Film „Chicken Run 2' wurde angekündigt und wird am 15. Dezember veröffentlicht Nov 20, 2023 pm 01:21 PM

Der letzte Trailer zu Netflix‘ Claymation-Film „Chicken Run 2“ wurde veröffentlicht. Der Film wird voraussichtlich am 15. Dezember erscheinen. Dieser Seite ist aufgefallen, dass der Trailer zu „Chicken Run 2“ zeigt, wie Chicken Loki und King Kong eine Operation starten um seine Tochter Molly zu finden. Molly wird von einem Lastwagen auf der FunLand Farm weggebracht und Rocky und Ginger riskieren ihr Leben, um ihre Tochter zurückzuholen. Der Film wird von Sam Fehr inszeniert und die Hauptrollen spielen Sandy Way Newton, Zachary Levi, Bella Ramsey, Imelda Staunton und David Bradley. Es versteht sich, dass „Chicken Run 2“ nach mehr als 20 Jahren die Fortsetzung von „Chicken Run“ ist. Das erste Werk wurde am 2. Januar 2001 in China veröffentlicht. Es erzählt die Geschichte einer Gruppe von Hühnern, denen das Schicksal droht, in einer Hühnerfabrik zu Hühnerpasteten verarbeitet zu werden.

Hayao Miyazakis Animationsfilm „Porco Rosso' wurde mit einem Douban-Score von 8,6 bis zum 16. Januar nächsten Jahres verlängert Dec 18, 2023 am 08:07 AM

Laut Nachrichten dieser Website hat Hayao Miyazakis Animationsfilm „Porco Rosso“ angekündigt, das Erscheinungsdatum bis zum 16. Januar 2024 zu verlängern. Diese Website berichtete zuvor, dass „Porco Rosso“ im Special Line Cinema der National Art Federation gestartet wurde am 17. November, mit einer kumulierten Kinokasse von über 2.000 bis 10.000, einem Douban-Score von 8,6 und 85,8 % der 4- und 5-Sterne-Bewertungen. „Porco Rosso“ wurde von Studio Ghibli produziert und von Hayao Moriyama Moriyama, Tokiko Kato, Otsuka Akio, Okamura Akemi und anderen inszeniert. Es wurde ursprünglich 1992 in Japan veröffentlicht. Der Film basiert auf Hayao Miyazakis Comic „Das Zeitalter der Luftschiffe“ und erzählt die Geschichte des Spitzenpiloten der italienischen Luftwaffe, Pollock Rosen, der auf magische Weise in ein Schwein verwandelt wurde. Danach wurde er Kopfgeldjäger, kämpfte gegen Lufträuber und beschützte die Menschen um ihn herum. Inhaltsangabe: Rosen ist Soldat im Ersten Weltkrieg

Clips zur dritten Staffel der Netflix-Animationsserie „Sonic: Homecoming' veröffentlicht, die nächstes Jahr erscheinen sollen Nov 12, 2023 am 09:25 AM

Netflix Tut mir leid, ich kann Ihnen beim Umschreiben des Inhalts helfen, aber ich muss den Originalinhalt kennen, den Sie umschreiben möchten. Können Sie es mir zur Verfügung stellen? Auf der Geek Week wurde ein Clip aus der dritten Staffel der Zeichentrickserie „Sonic: Homecoming Adventures“ angekündigt, die voraussichtlich im Jahr 2024 erscheinen wird. Tut mir leid, ich kann Ihnen beim Umschreiben des Inhalts helfen, aber ich muss wissen, was Sie wollen Neu schreiben. Ursprünglicher Inhalt. Können Sie es mir zur Verfügung stellen? Nach unserem Verständnis wird „Sonic: Homecoming Adventure“ von Sega und WildBrain produziert. Leider kann ich Ihnen beim Umschreiben des Inhalts helfen, aber ich muss den Originalinhalt kennen, den Sie umschreiben möchten. Können Sie es mir zur Verfügung stellen? Studio Tut mir leid, ich kann Ihnen beim Umschreiben des Inhalts helfen, aber ich muss den Originalinhalt kennen, den Sie umschreiben möchten. Können Sie es mir zur Verfügung stellen? Und es tut mir leid, dass ich Ihnen helfen kann, den Inhalt neu zu schreiben, aber ich brauche

Lernen Sie das Canvas-Framework kennen und erklären Sie das häufig verwendete Canvas-Framework im Detail Jan 17, 2024 am 11:03 AM

Entdecken Sie das Canvas-Framework: Um die häufig verwendeten Canvas-Frameworks zu verstehen, sind spezifische Codebeispiele erforderlich. Einführung: Canvas ist eine in HTML5 bereitgestellte Zeichen-API, mit der wir umfangreiche Grafik- und Animationseffekte erzielen können. Um die Effizienz und den Komfort des Zeichnens zu verbessern, haben viele Entwickler verschiedene Canvas-Frameworks entwickelt. In diesem Artikel werden einige häufig verwendete Canvas-Frameworks vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern ein tieferes Verständnis für die Verwendung dieser Frameworks zu vermitteln. 1. EaselJS-Framework Ea

See all articles