찾다
웹 프론트엔드H5 튜토리얼입자를 그리는 수식과 결합된 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.                 }
  28.  this.vy = vy;
  29.                                                         
  30. },
  31. 입자에는 총 두 가지 상태가 있습니다. 하나는 자유 낙하 상태이고 다른 하나는 흡입 상태입니다. 자유낙하는 말할 것도 없고요. 흡입에 대해 이야기하기 전에 입자의 속성을 게시해 보겠습니다.



JavaScript 코드

클립보드에 콘텐츠 복사
var
  1. 점 = 함수(x,y,vx,vy,tox,toy,color){  
  2. 이것
  3. .x=x;
  4. 이것
  5. .y=y  
  6. 이것
  7. .vx=vx;  
  8. 이것
  9. .vy=vy;
  10. 이것
  11. .nextox =
  12. 이것
  13. .nextoy = 장난감  
  14. 이것
  15. .color =
  16. 이것
  17. .visible = true
  18. 이것
  19. .globleDown = 거짓
  20. 이것
  21. .setEnd(톡스, 장난감) }
  22. setEnd:
  23. 기능
  24. (톡스, 장난감){                                                                   
  25.                                                                      
  26.                                                                                                                                                .y;                                                                       
  27. },
  28. 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;xbigImageData.width;x =2){   
    18.             for(var y=0;ybigImageData.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值后, 把位置赋给粒子, 成为粒子의 目的地. 전형적인 效果了.


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5 : 웹 표준 및 기술의 발전H5 : 웹 표준 및 기술의 발전Apr 15, 2025 am 12:12 AM

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AM

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLH5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

H5는 html5와 동일합니까?H5는 html5와 동일합니까?Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는