불꽃놀이 효과를 얻기 위한 HTML5 Canvas 실용적인 코드 케이스
- 黄舟원래의
- 2017-03-30 13:22:294254검색
1. 효과
2. 코드 분석
(1) requestAnimationFrame
requestAnimationFrame은 타이밍을 위해 사용됩니다 작업 반복을 위한 인터페이스 는 setTimeout과 유사하며 주요 목적은 웹 페이지를 프레임별로 다시 그리는 것입니다.
이 API를 설정하는 목적은 다양한 웹 페이지 애니메이션 효과(DOM 애니메이션, 캔버스 애니메이션, SVG 애니메이션, WebGL 애니메이션)가 통합된 새로 고침 메커니즘을 갖도록 하여 시스템 리소스를 절약하고 시스템 성능을 향상시키는 것입니다. 시각적 효과를 향상시킵니다. 코드에서 이 API를 사용하는 것은 애니메이션을 실행하고 싶다고 브라우저에 알리고 브라우저가 다음 애니메이션 프레임에서 웹 페이지를 다시 그리도록 예약하도록 하는 것입니다.
requestAnimationFrame의 장점은 디스플레이의 새로 고침 메커니즘을 최대한 활용하고 시스템 리소스를 절약한다는 것입니다. 디스플레이에는 고정된 새로 고침 빈도(60Hz 또는 75Hz)가 있습니다. 이는 초당 최대 60~75회만 다시 그릴 수 있음을 의미합니다. requestAnimationFrame의 기본 아이디어는 이 새로 고침 빈도와 동기화를 유지하고 이 새로 고침 빈도를 사용하는 것입니다. 페이지를 다시 그리려면 또한 이 API를 사용하면 페이지가 더 이상 브라우저의 현재 탭에 없으면 페이지 새로 고침이 자동으로 중지됩니다. 이렇게 하면 CPU, GPU 및 전력이 절약됩니다.
하지만 한 가지 주목할 점은 requestAnimationFrame이 메인 스레드에서 완료된다는 것입니다. 이는 메인 스레드가 매우 바쁜 경우 requestAnimationFrame의 애니메이션 효과가 크게 감소한다는 것을 의미합니다.
requestAnimationFrame은 콜백 함수를 매개변수로 사용합니다. 이 콜백 함수는 브라우저가 다시 그리기 전에 호출됩니다.
requestID = window.requestAnimationFrame(callback);
현재 Firefox 23/IE 10/Chrome/Safari 상위 버전 브라우저에서 이 방법을 지원합니다. 다음 방법을 사용하여 브라우저가 이 API를 지원하는지 확인할 수 있습니다. 지원되지 않는 경우 배포 방법을 직접 시뮬레이션하세요.
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();위 코드는 requestAnimationFrame을 초당 60회(대략 16.7밀리초마다 한 번씩) 시뮬레이션합니다.
requestAnimationFrame을 사용할 때는 반복적으로 호출하면 됩니다.
function repeatOften() { // Do whatever requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);cancelAnimationFrame을 사용하여 다시 그리기를 취소합니다.
window.cancelAnimationFrame(requestID);
해당 매개변수는 작업 ID를 나타내는 requestAnimationFrame이 반환한 정수 값입니다.
(2) 캔버스(canvas) 준비
브라우저가 캔버스를 지원하는지 확인하고, 너비와 높이를 브라우저 창 크기에 맞게 설정합니다.
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) { return;
}
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;var ctx = canvas.getContext("2d");(3) 불꽃놀이 개체(FireWork)
폭죽 효과는 간단히 점을 둘러싸는 것으로 생각하면 되며, 폭발하면 옆으로 퍼지는 작은 공이 많이 생성됩니다. 따라서 불꽃놀이 개체가 필요합니다. 이 개체는 주로 불꽃놀이의 위치와 주변 공에 대한 정보를 기록합니다. 그래서 우리의 불꽃놀이 객체는 다음과 같이 정의됩니다.
function FireWork() {
this.x = -1;
this.y = -1;
this.balls = [];
}그럼 이 객체에는 어떤 메소드가 있어야 할까요?
먼저 폭발하는 작은 공을 만듭니다.
createBalls: function () {
for (var i = 0; i < 300; i++) {
var angle = Math.random() * Math.PI * 2,
radius = getRandom(50, 200);
this.balls.push(new Ball(fwx, fwy, fwx + Math.cos(angle) * radius, fwy + Math.sin(angle) * radius));
}
}참고: 여기서 fwx는 불꽃놀이 위치의 X축 좌표이고, fwy는 불꽃놀이 위치의 Y축 좌표입니다. 아래와 같습니다.
여기서 공의 이동 길이는 50~200 사이의 임의의 값입니다. 공의 궤적의 시작점은 불꽃놀이의 위치이고 끝점은 원 위의 임의의 지점입니다.
그런 다음 주로 위치를 결정하고 작은 공을 생성하기 위해 불꽃놀이를 초기화해야 합니다.
init: function () {
this.x = getRandom(200, width - 200);
this.y = getRandom(200, height - 200);
fwx = this.x;
fwy = this.y;
this.createBalls();
drawCount = 0;
currBallIndex = 0;
}참고: 여기서 drawCount는 추첨 횟수이고 currBallIndex는 현재 추첨된 공 인덱스 입니다.
FireWork 전체는 다음과 같이 정의됩니다.
function FireWork() {
this.x = -1;
this.y = -1;
this.balls = [];
}
FireWork.prototype = {
init: function () {
this.x = getRandom(200, width - 200);
this.y = getRandom(200, height - 200);
fwx = this.x;
fwy = this.y;
this.createBalls();
drawCount = 0;
currBallIndex = 0;
},
run: function () {
this.init();
},
createBalls: function () {
for (var i = 0; i < 300; i++) {
var angle = Math.random() * Math.PI * 2,
radius = getRandom(50, 200);
this.balls.push(new Ball(fwx, fwy, fwx + Math.cos(angle) * radius, fwy + Math.sin(angle) * radius));
}
}
}(4) 폭발로 생성된 공 객체(Ball)
공은 시작점과 끝점의 위치를 알아야 하므로 다음과 같이 정의됩니다. 다음과 같습니다.
function Ball(bx, by, ex, ey) { this.bx = bx;//起点X轴坐标
this.by = by;//起点Y轴坐标
this.ex = ex;//终点X轴坐标
this.ey = ey;//终点Y轴坐标}공은 현재 추첨 횟수와 총 추첨 횟수를 바탕으로 현재 좌표와 다음 그리기 좌표를 계산할 수 있어야 합니다. 이 두 좌표를 연결하는 직선이 그려지는 내용입니다. 이번에는 다음과 같이 정의됩니다.
Ball.prototype = {
getSpan: function () {
var xSpan = (this.ex - this.bx) / allDrawCount,
ySpan = (this.ey - this.by) / allDrawCount;
return {
x: xSpan,
y: ySpan
};
},
currPosition: function () {
var span = this.getSpan(),
currX = -1,
currY = -1;
if (drawCount < allDrawCount) {
currX = this.bx + span.x * (drawCount - 1);
currY = this.by + span.y * (drawCount - 1);
return {
x: currX,
y: currY
};
} return null;
},
nextPosition: function () {
var span = this.getSpan(),
currX = -1,
currY = -1;
if (drawCount < allDrawCount) {
currX = this.bx + span.x * drawCount;
currY = this.by + span.y * drawCount;
return {
x: currX,
y: currY
};
} return null;
}
}(5) 전역 변수와 도구 메서드
var fwx = -1, //烟花位置X轴坐标
fwy = -1, //烟花位置Y轴坐标
currFW = null, //烟花实例
currBallIndex = -1, //当前正在绘制的小球索引
drawCount = 0, //绘制次数
allDrawCount = 40, //总共需要的绘制次数
width = canvas.width, //画布宽度
height = canvas.height; //画布高度그 다음에는 여러 가지 도구 메서드가 있습니다.
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}function getRandom(minNum, maxNum) {
var iChoices = maxNum - minNum + 1;
return Math.floor(Math.random() * iChoices + minNum);
}(6) 그리기 방법
드디어 requestAnimationFrame이 호출할 그리기 방법이 하나 남았습니다. 이 그리기 방법은 현재 그리는 갯수를 기준으로 폭발하는 공의 경로(시작점과 끝점을 포함하는 선분)를 구한 후, 마지막으로 그린 경로를 지우는 것입니다.
하나의 불꽃 효과가 그려지면 다음 불꽃 그리기를 진행합니다.
function drawLine(span) {
if (currFW && currBallIndex !== -1) {
if (drawCount <p>여기 색상은 임의의 값입니다. </p><h2> (7) 그리기 시작 </h2><p>마지막 단계는 그리기 시작입니다. </p><pre class="brush:html;toolbar:false;">currFW = new FireWork();
currFW.run();
requestAnimationFrame(drawLine);(8) 모든 코드.
전체 코드는 다음과 같으며, 총 160줄입니다.
아아아아토론에 오신 것을 환영합니다.
위 내용은 불꽃놀이 효과를 얻기 위한 HTML5 Canvas 실용적인 코드 케이스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!