이번에는 H5 캔버스를 사용하여 공포 애니메이션을 만드는 방법을 소개하겠습니다. H5 캔버스를 사용하여 공포 애니메이션을 만들 때 주의 사항은 무엇입니까?
캔버스는 흥미로운 효과와 애니메이션을 얻을 수 있습니다. 간단한 페이지 구현을 통해 기본적인 그리기 방법을 알아보세요.
Effect
Happy Halloween
기본 지식
let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');
Start path
context.beginPath();
beginPath() 메서드는 캔버스에서 그리기 경로를 시작하거나 현재 경로를 재설정합니다.
Move path
context.moveTo();
moveTo() 메서드는 선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동합니다.
Add line
context.lineTo();
lineTo() 메서드는 새 점을 추가하고 해당 점에서 캔버스의 지정된 점까지 선을 만듭니다.
drawImage
context.drawImage(image,x,y);
drawImage() 메서드는 캔버스에 이미지, 캔버스 또는 비디오를 그리거나 이미지의 일부를 그리고 이미지 크기를 늘리거나 줄일 수 있습니다.
픽셀 데이터 가져오기
context.getImageData(x,y,width,height);
getImageData() 메서드는 직사각형의 픽셀 데이터를 지정하는 캔버스 imageData 개체를 가져올 수 있습니다.
imageData 개체의 각 픽셀에는 rgba 값이 있으며, 이는 배열 형식으로 data 속성에 저장됩니다.
픽셀 데이터 다시 넣기
context.putImageData(imageData,x,y);
putImageData() 메서드는 획득한 이미지 데이터를 캔버스에 다시 넣습니다.
Implementation
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(); } })();
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어에 주목하세요. 홈페이지other관련 기사!
추천 자료:
캔버스를 사용하여 검은 배경과 특수 효과로 파편 불꽃놀이를 만드는 방법
위 내용은 H5 캔버스를 사용하여 공포 애니메이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!