Utilisez le canevas H5 pour créer des animations d'horreur

Cette fois, je vais vous apporter les précautions concernant l'utilisation du canevas H5 pour réaliser des animations d'horreur. Voici les cas pratiques.

Canvas peut réaliser des effets et des animations intéressants. Découvrez les méthodes de dessin de base avec une simple implémentation de page.

Effet

Joyeux Halloween

Connaissances préliminaires

let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');

Démarrer le chemin

context.beginPath();

MéthodebeginPath() sur le canevas Démarrez un tracé de dessin ou réinitialisez le tracé actuel.

Déplacer le chemin

context.moveTo();

La méthode moveTo() déplace le chemin vers le point spécifié dans le canevas sans créer de ligne.

Ajouter une ligne

context.lineTo();

La méthode lineTo() ajoute un nouveau point et crée une ligne du point au point spécifié dans le canevas.

drawImage

context.drawImage(image,x,y);

La méthode drawImage() peut dessiner une image, un canevas ou une vidéo sur le canevas, ou vous pouvez dessiner certaines parties de l'image et augmenter/diminuer la taille de la image.

Obtenir les données de pixels

context.getImageData(x,y,width,height);

La méthode getImageData() peut obtenir l'objet imageData du canevas, qui spécifie les données de pixels du rectangle.

Dans l'objet imageData, il y a une valeur rgba pour chaque pixel, qui est stockée dans l'attribut data sous la forme d'un tableau.

Remettez les données de pixels

context.putImageData(imageData,x,y);

La méthode putImageData() remet les données d'image acquises sur le canevas.

implémentation

html

<canvas id="canvas"></canvas><button id="click" class="switch">Click</button>

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

js

(function () {    class Halloween {        constructor(id) {            this.canvas = document.getElementById(id);            this.ctx = this.canvas.getContext('2d');            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 = '60px Verdana';            this.ctx.fillStyle = '#ffffff';            this.ctx.fillText('万圣节快乐', 350, 280);
        }        //闪电
        lightning() {            let ctx = this.ctx;
            ctx.strokeStyle = '#fff';
            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();
    }
})();

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php autres articles liés. !

Lecture recommandée :

Animation SVG dans le développement front-end

Comment créer un fond noir avec des feux d'artifice de débris d'effets spéciaux en toile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!