Canvas realisiert atemberaubende Partikelbewegungseffekte-CSS-Tutorial-php.cn

In diesem Artikel wird hauptsächlich Canvas vorgestellt und vorgestellt, um schillernde Partikelbewegungseffekte zu erzielen (Partikel erzeugen Text). Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz angeben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Gehen Sie direkt zum Code. Wenn Sie ihn nicht verstehen, können Sie die Codekommentare lesen. Sie werden wahrscheinlich die allgemeine Idee verstehen.

HTML-Code

Canvas 实现炫丽的粒子运动效果-云库前端

散开类型：

散开效果（对归位有效）：

Nach dem Login kopieren

HTML-Code ist nicht viel, nur ein paar Bedienelemente. Hier ist es auf einen Blick leicht zu verstehen. Sie müssen nicht zu viele Worte verschwenden. Werfen wir einen Blick auf den Protagonisten-JavaScript-Code dieses Artikels. Bevor wir uns jedoch den Code ansehen, können wir uns genauso gut die Idee anhören, wie dieser Effekt erzielt werden kann:

Zuerst müssen wir eine Reihe von Extras (Partikel) generieren.
Hängen Sie die relevanten Parameter jedes Partikels an einige seiner eigenen Attribute, da jedes Partikel seine eigene Flugbahn hat >
Dann muss man sie einzeln bewegen lassen. Es gibt zwei Arten von Bewegung (freie Bewegung und textgenerierte Bewegung);

Der JavaScript-Code verwendet drei Canvas-Leinwände, this.iCanvas (Startseite), this.iCanvasCalculate (zur Berechnung verwendet). Textbreite), this.iCanvasPixel (wird zum Zeichnen von Text und zum Erhalten der Positionskoordinaten des dem Text entsprechenden Pixels verwendet).

This.iCanvasCalculate und this.iCanvasPixel müssen nicht auf der Seite angezeigt werden, es handelt sich lediglich um Hilfsfunktionen.

Das Folgende ist ein großartiger JS-Implementierungscode

function Circle() { var This = this; this.init(); this.generalRandomParam(); this.drawCircles(); this.ballAnimate(); this.getUserText(); // 窗口改变大小后，生计算并获取画面 window.onresize = function(){ This.stateW = document.body.offsetWidth; This.stateH = document.body.offsetHeight; This.iCanvasW = This.iCanvas.width = This.stateW; This.iCanvasH = This.iCanvas.height = This.stateH; This.ctx = This.iCanvas.getContext("2d"); } } // 初始化 Circle.prototype.init = function(){ //父元素宽高 this.stateW = document.body.offsetWidth; this.stateH = document.body.offsetHeight; this.iCanvas = document.createElement("canvas"); // 设置Canvas 与父元素同宽高 this.iCanvasW = this.iCanvas.width = this.stateW; this.iCanvasH = this.iCanvas.height = this.stateH; // 获取 2d 绘画环境 this.ctx = this.iCanvas.getContext("2d"); // 插入到 body 元素中 document.body.appendChild(this.iCanvas); this.iCanvasCalculate = document.createElement("canvas"); // 用于保存计算文字宽度的画布 this.mCtx = this.iCanvasCalculate.getContext("2d"); this.mCtx.font = "128px 微软雅黑"; this.iCanvasPixel = document.createElement("canvas"); this.iCanvasPixel.setAttribute("style","position:absolute;top:0;left:0;"); this.pCtx = null; // 用于绘画文字的画布 // 随机生成圆的数量 this.ballNumber = ramdomNumber(1000, 2000); // 保存所有小球的数组 this.balls = []; // 保存动画中最后一个停止运动的小球 this.animte = null; this.imageData = null; this.textWidth = 0; // 保存生成文字的宽度 this.textHeight = 150; // 保存生成文字的高度 this.inputText = ""; // 保存用户输入的内容 this.actionCount = 0; this.ballActor = []; // 保存生成文字的粒子 this.actorNumber = 0; // 保存生成文字的粒子数量 this.backType = "back"; // 归位 this.backDynamics = ""; // 动画效果 this.isPlay = false; // 标识（在生成文字过程中，不能再生成） } // 渲染出所有圆 Circle.prototype.drawCircles = function () { for(var i=0;ithis.iCanvasW-ball.size || ball.xthis.iCanvasW-ball.size){ ball.x = this.iCanvasW-ball.size; }else{ ball.x = ball.size; } ball.speedX = - ball.speedX; } if(ball.y>this.iCanvasH-ball.size || ball.ythis.iCanvasH-ball.size){ ball.y = this.iCanvasH-ball.size; }else{ ball.y = ball.size; } ball.speedY = - ball.speedY; } } } // 开始动画 Circle.prototype.ballAnimate = function(){ var This = this; var animateFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; (function move(){ animte = animateFrame(move); This.ctx.clearRect(0, 0, This.iCanvasW, This.iCanvasH); This.changeposition(); for(var i=0;i
        
         Nach dem Login kopieren

Nachdem ich den Code gelesen habe, habe ich wohl einfach mein Herz geblendet, aber das war nicht der Fall Machen Sie Lust, dieses Ding zu machen. Aus diesem Grund weiß ich, dass es von Ihren Augen überzeugt werden muss. Online-DEMO: Beispiel für dynamische Partikel.

Niemand ist perfekt und der Code auch nicht. Der Code, der scheinbar reibungslos läuft, weist mehr oder weniger Mängel auf. Derzeit unterstützt dieser Effekt nur Chinesisch. Was Englisch angeht, muss ich auf jeden Fall härter arbeiten, Englisch wird auf jeden Fall später dazukommen, es ist nur eine Frage der Zeit. Es gibt auch das Attribut im Code, mit dem markiert wird, ob der generierte Text erneut ausgeführt werden kann: this.isPlay, was immer noch ein kleiner Fehler ist. Die Zustandsänderung von this.isPlay ändert sich nicht genau in dem Moment, in dem die Partikel zurückkehren. ändert aber den Zustand im Voraus. Dieser Zustand hat jedoch keinen Einfluss auf die vollständige Umsetzung des Effekts dieses Beispiels.

In diesem Beispiel wird die Bibliothek „dynamics.js“ verwendet und hauptsächlich einige darin enthaltene Bewegungsfunktionen verwendet, um die Bewegung der Partikel eindrucksvoller zu gestalten, das ist alles.

Verwandte Empfehlungen:

Tutorial zur Verwendung von Canvas in HTML5 kombiniert mit Formeln zum Zeichnen von Partikelbewegungen_HTML5-Tutorial-Fähigkeiten

Das obige ist der detaillierte Inhalt vonCanvas realisiert atemberaubende Partikelbewegungseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!