Heim > Web-Frontend > H5-Tutorial > Hauptteil

Verwenden Sie die H5-Leinwand, um Horroranimationen zu erstellen

php中世界最好的语言
Freigeben: 2018-03-13 16:33:45
Original
3385 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von H5-Leinwand zum Erstellen von Horroranimationen vorstellen. Hier sind die praktischen Fälle.

Canvas kann einige interessante Effekte und Animationen erzielen. Erfahren Sie mehr über grundlegende Zeichenmethoden mit einer einfachen Seitenimplementierung.

Effekt

Fröhliches Halloween

Vorkenntnisse

let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');
Nach dem Login kopieren

Startpfad

context.beginPath();
Nach dem Login kopieren

beginPath()-Methode auf der Leinwand Starten Sie einen Zeichenpfad oder setzen Sie den aktuellen Pfad zurück.

Pfad verschieben

context.moveTo();
Nach dem Login kopieren

Die Methode moveTo() verschiebt den Pfad zum angegebenen Punkt im Canvas, ohne eine Linie zu erstellen.

Linie hinzufügen

context.lineTo();
Nach dem Login kopieren

Die lineTo()-Methode fügt einen neuen Punkt hinzu und erstellt eine Linie vom Punkt zum angegebenen Punkt im Canvas.

drawImage

context.drawImage(image,x,y);
Nach dem Login kopieren

Die Methode drawImage() kann ein Bild, eine Leinwand oder ein Video auf der Leinwand zeichnen, oder Sie können einige Teile des Bildes zeichnen und die Größe des Bildes vergrößern/verkleinern Bild.

Pixeldaten abrufen

context.getImageData(x,y,width,height);
Nach dem Login kopieren

Die Methode getImageData() kann das Canvas-ImageData-Objekt abrufen, das die Pixeldaten des Rechtecks ​​angibt.

Im imageData-Objekt gibt es für jedes Pixel einen RGBA-Wert, der im Datenattribut in Form eines Arrays gespeichert wird.

Pixeldaten zurücksetzen

context.putImageData(imageData,x,y);
Nach dem Login kopieren

Die Methode putImageData() setzt die erfassten Bilddaten wieder auf die Leinwand.

Implementierung

HTML

<canvas id="canvas"></canvas><button id="click" class="switch">Click</button>
Nach dem Login kopieren

CSS

html,body,canvas {    width: 100%;    height: 100%;    margin: 0;
}.switch {    position: absolute;    top: 70%;    right: 10%;    width: 50px;    height: 50px;    border-radius: 50px;    outline: none;    cursor: pointer;    animation: switch-animate alternate infinite ease 1s 0s;
}
@keyframes switch-animate {    from {        box-shadow: 0 0 30px #ece9c5;
    }    to {        box-shadow: 0 0 100px #eae5a7;
    }
}
Nach dem Login kopieren

js

(function () {    class Halloween {        constructor(id) {            this.canvas = document.getElementById(id);            this.ctx = this.canvas.getContext(&#39;2d&#39;);            this.w = this.canvas.width;            this.h = this.canvas.height;            this.data = [];
        }        //初始画布
        initDraw(img) {            this.w = this.canvas.width = img.width;            this.h = this.canvas.height = img.height;            this.ctx.drawImage(img, 0, 0);            this.data = this.ctx.getImageData(0, 0, this.w, this.h);
        }        //显示文字
        drawText() {            this.ctx.font = &#39;60px Verdana&#39;;            this.ctx.fillStyle = &#39;#ffffff&#39;;            this.ctx.fillText(&#39;万圣节快乐&#39;, 350, 280);
        }        //闪电
        lightning() {            let ctx = this.ctx;
            ctx.strokeStyle = &#39;#fff&#39;;
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(800, 10);
            ctx.lineTo(600, 100);
            ctx.lineTo(500, 200);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(600, 100);
            ctx.lineTo(650, 170);
            ctx.stroke()
        }        //打雷
        thunder() {            let timer = Math.floor(800 * Math.random());            this.reverse();            this.lightning();            this.drawText();
            setTimeout(() => {                this.reset();
            }, timer);
        }        //反转画布
        reverse() {            let imgData = this.ctx.getImageData(0, 0, this.w, this.h);            for (var i = 0, len = imgData.data.length; i < len; i += 4) {
                imgData.data[i] = 255 - imgData.data[i];
                imgData.data[i + 1] = 255 - imgData.data[i + 1];
                imgData.data[i + 2] = 255 - imgData.data[i + 2];
                imgData.data[i + 3] = 255;
            }            this.ctx.putImageData(imgData, 0, 0);
        }        //重置画布
        reset() {            this.ctx.putImageData(this.data, 0, 0);
        }
    }    let halloween = new Halloween(&#39;canvas&#39;);    let canvas = document.getElementById(&#39;canvas&#39;);    let ctx = canvas.getContext(&#39;2d&#39;);    let img = new Image();
    img.src = &#39;/images/halloween.png&#39;;
    img.onload = () => {
        halloween.initDraw(img);
    }    document.getElementById(&#39;click&#39;).onclick = () => {
        halloween.thunder();
    }
})();
Nach dem Login kopieren


Verwenden Sie die H5-Leinwand, um Horroranimationen zu erstellen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website !

Empfohlene Lektüre:

SVG-Animation in der Frontend-Entwicklung

Wie man mit Spezialeffekten ein Trümmerfeuerwerk mit schwarzem Hintergrund erstellt auf Leinwand

Das obige ist der detaillierte Inhalt vonVerwenden Sie die H5-Leinwand, um Horroranimationen zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage