나는 최근에 비가 내리고 눈이 내리는 애니메이션 효과를 깨달을 필요가있는 프로젝트를 만들었 으므로이 캔버스의 일반적인 떨어지는 물건을 보여주기 위해 여기서 드롭 구성 요소를 만들었습니다. 메인 텍스트를 소개하기 전에 렌더링을 보여 드리겠습니다.
디스플레이 렌더링 :
비가 내리고 눈
좋아 보인다. DOM 요소의 생성을 사용하여 다중 객체 위치 이동 사진을 생성하는 것과 비교할 때 캔버스를 사용하는 것이 더 쉽고 빠르며 성능이 향상됩니다.
통화 코드
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 문서 </title> <style> #canvas {width : 100%; 높이 : 100%;} </style> </head> <body> <canvas id = "canvas"> </canvas> </canvas> src = "canvasdrop.js"> </script> <cript> canvasdrop.init ({type : "rain", // drop type, rain or snowspeed : [0.4,2.5], // 속도 범위 크기 _range : [0.5,1.5], // 크기 및 반경 범위가 true : // wind e, offort : -105, ~ 10. Hasgravity : true // 중력 고려 사항이 있습니까}); </script> </body> </html>좋아, 간단한 구현 원칙을 설명해 봅시다. 먼저 바람 방향 각도, 확률, 객체 데이터 등과 같은 글로벌 변수를 정의하십시오.
글로벌 변수를 정의합니다
// 두 개의 객체 데이터 정의 // 드롭 드롭 객체 개체 객체 // 반동 객체 바운스 바운스 객체 var drops = [], bounces = []; // 중력 가속도는 0.2/한 프레임 var gravity = 0.2; var speed_x_x, // horizontal adveleration speed_x_y, // longiline acceleration wind_anger; // 바람 방향 // 캔버스 var canvaswidth, canvasheight; // drop var drop_chance를 생성 할 확률; // 객체 var opts를 구성 할 확률; // requestAnimationFrame 메소드가 있는지 여부를 사용하는 경우, window window.requestanimation이 될 것입니다. || window.weind
핵심 객체를 정의하십시오
다음으로 몇 가지 중요한 객체를 정의해야합니다. 조직이 정의해야 할 객체가 적습니다. 전체적으로, 전체 드롭 구성 요소에서 3 개의 핵심 객체 만 정의되며 다음과 같습니다.
수평 x 및 수직 y 속도 크기 단위가있는 벡터 속도 물체 : v = 변위 픽셀/프레임
벡터 객체에 대한 이해도 매우 간단하고 조잡합니다.
var vector = function (x, y) {// 개인 속성 수평 속도 x, 수직 속도 ythis.x = x || 0; this.y = y || 0;}; // public method- 추가 : 속도 변화 함수, 매개 변수에 따라 속도를 높이고 // 비즈니스 요구로 인해 모든 가속도가 고려되므로 속도가 느려지지 않으며 이후 단계에서 확장 될 수 있습니다. ** @param v 객체 || string */vector.prototype.add = function (v) {if (vx! = null && vy! = null) {this.x += vx; this.y += vy;} else {this.x += v; this.y += v;}}; // public method- copy : 이전 속도의 레코드를 저장하기 위해 vector. {// 동일한 속도 속성으로 벡터 인스턴스를 반환하면 새 벡터를 반환합니다 (this.x, this.y);}; 즉, 빗물 객체, 즉 빗방울과 눈이 위의 효과에서 떨어지면 기상 또는 껍질로 확장 할 수 있습니다. 드롭 객체의 기본 정의는 다음과 같습니다. // 생성자 var drop = function () {/ * .... */}; // public method-update drop.prototype.update = function () {/ * .... */}; // public method-drawdrop.protople.Draw () {/ * ...... */};위의 세 가지 방법을 읽은 후에는 그들의 역할을 추측 했습니까? 이 세 가지 방법이 무엇을하는지 이해합시다.
건설자
생성자는 주로 속도, 초기 좌표, 크기, 가속도 등과 같은 드롭 객체의 초기 정보를 정의 할 책임이 있습니다.
// 생성자 dropvar drop = function () {// drop의 초기 좌표 설정 // 먼저 var randomedge = math.random () * 2에서 떨어지는 요소를 선택하십시오. math.random () * canvas.height);} // 떨어지는 요소의 크기를 설정 // 임의의 값은 호출 된 opts 기능의 반경 범위에 의해 취해집니다. radius = (opts.size_range [0] + math.random () * opts.size_range [1]) * dpr; // rand valuest // (opts.speed [0] + math.random () * opts.speed [1]) * dpr; this.prev = this.pos; // 각도에 0.017453293 (2pi/360)을 곱하여 라디안으로 변환합니다. var earyager = 0.017453293; // 바람 방향의 각도를 가져옵니다 Wind_anger = opts.wind_direction * earyager; // 측면 가속도 속도 _x = this.speed * math.cos (wind_anger); // 종단 가속 속도 _y = - this.speed * math.sin (wind_anger);드롭 객체의 업데이트 방법
업데이트 방법은 변위 변경과 같은 각 프레임 드롭 인스턴스의 속성을 변경하는 데 도움이됩니다.
drop.prototype.update = function () {this.prev = this.pos.copy (); // 중력이 있으면 세로 속도가 증가하면 (opts.hasgravity) {this.vel.y += 중력;} // this.pos.add (this.vel);};드롭 객체의 드로우 방법
드로우 메소드는 각 프레임 드롭 인스턴스를 그리는 데 도움이됩니다.
drop.prototype.draw = function () {ctx.beginpath (); ctx.moveto (this.pos.x, this.pos.y); // 현재 두 가지 상황 만 있으며, 하나는 비가 있습니다. math.abs (this.radius * math.cos (wind_anger)); var ay = math.abs (this.radius * math.sin (wind_anger)); ctx.beziercurveto (this.pos.x + ax, this.y.y + ay, this.prev.x + ax, this.prev.y + ay, this. this.pos.y); ctx.stroke (); // 다른 사람은입니다 눈---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------넘어 지거나 떨어지는 것에서 반동의 대상, 즉 위의 빗물에서 반등하는 물방울은 후반 단계에서 리바운드 자갈이나 연기로 확장 할 수 있습니다.
정의는 매우 간단하므로 여기에서 자세히 설명하지 않습니다.
var bounce = function (x, y) {var dist = math.random () * 7; var angle = math.pi + math.random () * math.pi; this.pos = new vector (x, y); this.radius = 0.2+ math.random () * 0.8; this.vel = new Vector (angle) * dist, ang in (ang in) *. dist);}; bounce.prototype.update = function () {this.vel.y += gravity; this.vel.x *= 0.95; this.vel.y *= 0.95; this.bos.add (this.vel);}; bounce.prototype.draw () {ctx.beginpath (); ctx.arc (this.x.- this.radius * dpr, 0, math.pi * 2); ctx.fill ();};외부 인터페이스
업데이트
즉, 전체 캔버스 애니메이션에 해당하는 시작 기능
함수 update () {var d = 새 날짜; // 도면 ctx.ctx.clearrect (0, 0, canvas.width, canvas.height); var i = drops.length; while (i-) {var drop = drops [i]; drop.update ()가 하단으로 떨어지면 드롭에서 삭제해야합니다. Canvas.height) {// 리바운드가 필요한 경우 바운스 배열에 바운스 인스턴스를 추가하면 (opts.hasbounce) {var n = math.round (4 + math.random () * 4); (n-) bounces.push (새 바운스 (drop.pos.x, canvas.height));} // 드롭 인스턴스가 하단으로 떨어지면 인스턴스 객체의 드롭 배열에서 명확해야합니다. drop.splice (i, 1);} drop.draw (); {var bounce = bounces [i]; bounce.update (); bounce.draw (); if (bounce.pos.y> canvas.height) bounces.splice (i, 1);}} // 각 시간의 숫자가 if (drops.length <opts.maxnum) 인 경우 (drops.length <opts.maxnum) {drops.random () <varli =) opts.numlevel; for (; i <len; i ++) {drops.push (new drop ());}}} // 연속 루프 updateRequestanimframe (업데이트);}이니
인터페이스 시작, 화면의 픽셀 비율을 얻고 캔버스의 픽셀 크기를 설정하고 캔버스 스타일을 설정하는 등 전체 캔버스 캔버스의 모든 기본 속성을 초기화합니다.
function init (opts) {opts = opts; canvas = document.getElementByid (opts.id); ctx = canvas.getContext ( "2d"); //// 고문 화면과 호환 가능, 캔버스 캔버스 픽셀도 dpr = 창을 변경해야합니다. 고화질 스크린, 아르 보드 캔버스의 길이와 너비에는 dpr canvaswidth = canvas.clientWidth * dpr; canvasheight = canvas.clientHeight * dpr; // artboard canvas.width = canvaswidth의 너비와 높이; 0.4; // set style setstyle ();} 함수 setstyle () {if (opts.type == "rain") {ctx.linewidth = 1 * dpr; ctx.strokestyle = 'rgba (223,223,223,0.6)'; ctx.fillstyle = 'rgba (223,223,223,0.6)';} else {ctx.linewidth = 2 * dpr; ctx.strokestyle = 'rgba (254,254,254,0.8)'; ctx.fillstyle = 'rgba (254,254,254,0.8)';결론
자, 간단한 드롭 구성 요소가 완료되었습니다. 물론 완벽하지 않은 많은 것들이 있습니다. 이 드롭 구성 요소를 작성한 후 캔버스의 애니메이션 구현을 위해 H5 장면에는 발견 할 곳이 많이 있다고 생각합니다.
마지막으로, 단점과 나중에 작업에 대해 이야기 해 봅시다.
0.이 구성 요소에 대한 외부 인터페이스가 충분하지 않으며 조정 가능한 범위가 크지 않으며 추상화는 그다지 철저하지 않습니다.
1. 세트 스타일 세트 기본 스타일
2. 낙하 및 바운스 객체의 업데이트 및 드로우 방법을 사용자 정의하면 사용자는 속도와 크기 변화가 떨어지는 더 많은 양식과 스타일 효과를 설정할 수 있습니다.
3. 애니메이션 일시 중지, 가속 및 감속 작업의 인터페이스를 추가해야합니다.
위의 것은 비가 내리고 눈이 내리는 효과를 달성하기 위해 당신에게 소개 한 JS와 캔버스에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!
이 기사는 http://blog.csdn.net/xllily_11/article/details/51444311입니다