입자를 그리는 수식과 결합된 HTML5에서 캔버스를 사용하는 방법에 대한 튜토리얼 Motion_html5 튜토리얼 기술

최근에는 HTML5를 배우면서 만든 DEMO 중 일부를 웹페이지로 만들어서 컬렉션을 만들고 싶은데, 그냥 웹페이지를 만들고 모든 DEMO를 하나로 정리하는 것은 너무 추악할 것 같습니다. 하나씩. 그냥 캔버스를 배웠으니까 브라우저를 가지고 놀면서 작은 오프닝 애니메이션을 만들어보자고 생각했어요.

오프닝 애니메이션의 효과에 대해 잠시 고민한 끝에 파티클이 더 재미있을 것 같아서 파티클을 사용하기로 결정했습니다. 제가 쓴 첫 번째 기술 블로그 게시물이 텍스트와 그림의 입자화에 관한 내용이었던 것을 아직도 기억합니다. 그 당시에는 선형 모션만 하고 약간의 3D 효과를 추가했습니다. 운동 공식은 간단하다. 그래서 저는 이 오프닝 애니메이션을 좀 더 역동적으로 만들고 싶었습니다.

먼저 데모로 이동하세요: http://2.axescanvas.sinaapp.com/demoHome/index.html

선형 모션보다 효과가 더 역동적인가요? 그리고 그것은 정말 간단합니다. 이 블로그 게시물의 제목, 작은 공식, 큰 재미를 잊지 마세요. 그러한 효과를 얻으려면 우리에게 필요한 것은 중학교뿐입니다. . 또는 고등학교의 물리학 지식, 가속 운동과 감속 운동의 공식. 그래서 그것은 실제로 작은 방울 공식입니다. 원래 포스터는 멋진 것들을 가지고 장난치는 것을 좋아하지만 직장에서는 사용하지 않을 수도 있지만 그 재미는 정말 매력적입니다. 게다가, 이렇게 하면 프로그래밍 사고 능력도 강화될 수 있습니다.

더 이상 고민하지 않고 본론으로 들어가겠습니다. 간단하게 원리를 설명드리겠습니다~~

입자 운동의 핵심 코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 업데이트:기능(시간){   
2.             this.x  = this.vx*time;   
3.             this.y  = this.vy*time;   
4.     
5.             if(!this.globleDown&&this.y>0){   
6.                var yc = this.toy - this.y;   
7.                var xc = this.tox - this.x;   
8.     
9.                this.jl = 수학.sqrt(xc*xc yc*yc);   
10.     
11.                var za = 20;   
12.     
13.                var ax = za*(xc/this.jl),   
14.                   안녕 = za*(yc/this.jl),   
15.                    vx = (this.vx ax*time)*0.97,   
16.                    vy = (this.vy ay*time)*0.97;   
17.     
18.                this.vx = vx;   
19.                this.vy = vy;   
20.     
21.             }그렇지 않으면 {   
22.                var 중력 = 9.8;   
23.                var vy = this.vy 중력*시간;   
24.     
25.                if(this.y>canvas.height){   
26.                    vy = -vy*0.7;   
27.                 }
29.  this.vy = vy;
                                                        
30. },
입자에는 총 두 가지 상태가 있습니다. 하나는 자유 낙하 상태이고 다른 하나는 흡입 상태입니다. 자유낙하는 말할 것도 없고요. 흡입에 대해 이야기하기 전에 입자의 속성을 게시해 보겠습니다.

JavaScript 코드

클립보드에 콘텐츠 복사

var

1. 점 = 함수(x,y,vx,vy,tox,toy,color){  
이것
2. .x=x;
이것
3. .y=y  
이것
4. .vx=vx;  
이것
5. .vy=vy;
이것
6. .nextox =
이것
7. .nextoy = 장난감  
이것
8. .color =
이것
9. .visible = true
이것
10. .globleDown = 거짓
이것
11. .setEnd(톡스, 장난감) }
13. setEnd:
기능
14. (톡스, 장난감){                                                                   
                                                                     
15.                                                                                                                                                .y;                                                                       
},

17. x와 y는 입자의 위치, vx는 입자의 수평 속도, vy는 입자의 수직 속도입니다. nexttox 등을 아는지 여부는 중요하지 않으며 단지 임시 변수일 뿐입니다. . tox 및 toy는 입자의 대상 위치입니다.

    먼저 모든 입자에 대상을 지정합니다. 이에 대해서는 아래에서 설명합니다. 즉, 입자가 그 장소에 도달하길 원하고, 가속도를 za라는 변수로 정의하고, 구체적인 값을 알고 싶다면 더 많은 테스트를 거쳐 대략적인 매개변수를 구하고, 20으로 설정했습니다. 그것은 거의 같은 느낌입니다. za는 입자와 목적지 사이의 선의 가속도이므로 간단한 삼각함수를 통해 입자의 위치와 목적지의 위치를 ​​통해 입자의 수평 가속도와 수직 가속도를 계산할 수 있습니다.
    
    

    JavaScript 코드클립보드에 콘텐츠 복사

    1. var ax = za*(xc/this.jl),
    2. ay = za*(yc/this.jl),
    수평 가속도와 수직 가속도를 얻은 후 다음 단계는 더욱 간단해집니다. 수평 속도와 수직 속도의 증가분을 직접 계산하여 수평 속도와 수직 속도의 값을 변경합니다

    
    
    

    XML/HTML 코드클립보드에 콘텐츠 복사

    1. vx = (this.vx ax*time)*0.97,
    2. vy = (this.vy ay*time)*0.97
    0.97을 곱한 이유는 에너지 손실을 시뮬레이션하여 입자가 느려지도록 하기 위함입니다. 시간은 각 프레임 간의 시간 차이입니다
    속도를 계산한 후 입자 위치를 업데이트하면 됩니다.

    
    
    

    XML/HTML 코드클립보드에 콘텐츠 복사

    1. this.x = this.vx*time
    2. this.y = this.vy*time
    비행 중에 입자와 목적지 사이의 연결 방향이 끊임없이 바뀌기 때문에 입자의 수평 가속도와 수직 가속도를 매 프레임마다 다시 계산해야 합니다.
    이게 운동의 원리인데 아주 간단하지 않나요?
    이제 모션의 원리에 대해 이야기했으니 위 애니메이션의 구체적인 구현에 대해 이야기해 보겠습니다. 즉, 애니메이션 초기화, 원하는 단어나 그림을 오프스크린 캔버스에 그린 다음 오프스크린의 픽셀을 얻습니다. getImageData 메소드를 통한 스크린 캔버스. 그런 다음 루프를 사용하여 오프스크린 캔버스에서 그려진 영역을 찾습니다. imageData의 데이터 값은 rgba 배열이므로 마지막 값, 즉 투명도가 128보다 크다는 것은 영역이 그려졌음을 의미한다고 판단합니다. 그어진. 그런 다음 해당 영역의 xy 값을 가져옵니다. 너무 많은 파티클 개체가 페이지 지연을 유발하는 것을 방지하기 위해 파티클 수를 제한합니다. 픽셀을 가져올 때마다 x 값과 y 값이 2씩 증가하여 개수가 줄어듭니다. 입자.

    
    
    

    XML/HTML 코드클립보드에 콘텐츠 복사

    1. this.osCanvas = document.createElement("canvas");   
    2.         var osCtx = this.osCanvas.getContext("2d");   
    3.     
    4.         this.osCanvas.width = 1000;   
    5.         this.osCanvas.height = 150;   
    6.     
    7.         osCtx.textAlign = "center";   
    8.         osCtx.textBaseline = "중간";   
    9.         osCtx.font="70px 微软雅黑,黑体 bold";   
    10.         osCtx.fillStyle = "#1D181F"  
    11.         osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2-40);   
    12.         osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2 40);   
    13.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas .키);   
    14.     
    15.         점 = [];   
    16.     
    17.         for(var x=0;x<bigImageData.width;x =2){   
    18.             for(var y=0;y<bigImageData.height;y =2){   
    19.                var i = (y*bigImageData.width   x)*4;   
    20.                if(bigImageData.data[i 3]>128){   
    21.                    var 점 = 신규점(   
    22.                        Math.random()>0.5?Math.random()*20 10:Math.random()*20 canvas.width-40,   
    23.                        -Math.random()*canvas.height*2,   
    24.                        0,   
    25.                        0,   
    26.                        x(canvas.width/2-this.osCanvas.width/2),   
    27.                        y (canvas.height/2-this.osCanvas.height/2),   
    28.                        "rgba(" bigImageData.data[i] "," bigImageData.data[i 1] "," bigImageData.data[i 2] ",1)"   
    29.                     );   
    30.                    dot.setEnd(canvas.width/2,canvas.height/2)   
    31.                    dots.push(dot);   
    32.                 }   
    33.             }   
    34.         }   

    일반적으로 位置xy值后, 把位置赋给粒子, 成为粒子의 目的地. 전형적인 效果了.