Maison > Article > interface Web > 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('canvas'); let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.src = '/images/halloween.png'; img.onload = () => { halloween.initDraw(img); } document.getElementById('click').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!