지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5_html5 튜토리얼 기술을 사용하여 불꽃놀이 효과를 만드는 방법에 대한 튜토리얼

HTML5_html5 튜토리얼 기술을 사용하여 불꽃놀이 효과를 만드는 방법에 대한 튜토리얼

WBOY
풀어 주다： 2016-05-16 15:46:46
원래의
1964명이 탐색했습니다.

설날이 다가오니 설날에는 불꽃놀이 생각밖에 떠오르지 않습니다. . . . 그래서 불꽃놀이 효과를 작성하기 위해 캔버스를 사용했습니다. 마우스를 클릭해도 불꽃놀이가 생성되지만 불꽃놀이에서 방출되는 입자는 30~200개입니다. 페이지의 입자 수가 특정 수준에 도달하면 때로는 페이지가 매우 정체될 수 있으며 의도적으로 Shenma를 최적화하지 않았습니다. 나중에 시간이 나면 얘기해보자.

데모로 바로 이동: 불꽃놀이 시작

원리는 매우 간단합니다. . . 불꽃놀이 클래스와 파편 클래스를 작성하고 인스턴스화하여 날아가게 하세요. 그런 다음 특정 지점에 도달하면 불꽃놀이 객체의 dead 속성을 true로 설정한 다음 특정 개수의 파편 객체를 인스턴스화하고 무작위로 생성하세요. 잔해 개체가 도달할 목표 지점을 지정한 다음 모든 잔해 개체가 그곳으로 날아가도록 합니다.

【불꽃놀이】

XML/HTML 코드클립보드에 콘텐츠 복사
  1. var 붐 = 기능(x,r,c,boomArea,shape){  / /烟화对象   
  2.             this.booms = [];   
  3.             this.x = x;   
  4.             this.y = (canvas.height r);   
  5.             this.r = r;   
  6.             this.c = c;   
  7.             this.shape = 모양 || 거짓;   
  8.             this.boomArea = boomArea;   
  9.             this.theta = 0;   
  10.             this.dead = false;   
  11.             this.ba = parseInt(getRandom(80 , 200));   
  12.         }   
  13.         Boom.prototype = {   
  14.             _paint:function(){     
  15.                 ctx.save();   
  16.                 ctx.beginPath();   
  17.                 ctx.arc(this.x,this.y,this.r,0,2*Math.PI);   
  18.                ctx.fillStyle = 이것.c;   
  19.                 ctx.fill();   
  20.                 ctx.restore();   
  21.             },   
  22.             _move:function(){   
  23.                var dx = this.boomArea.x - this.x, dy  = 이것.boomArea.y - this.y;   
  24.                thisthis.x = this.x dx*0.01;   
  25.                thisthis.y = this.y dy*0.01;   
  26.   
  27.                if(Math.abs(dx)<=this.ba && Math.abs(dy)< =this.ba){   
  28.                    if(this.shape){   
  29.                        this._shapBoom();   
  30.                    }   
  31.                    그외에는 this._boom();   
  32.                    this.dead = 참;   
  33.                 }   
  34.                 그 외 {   
  35.                    this._paint();   
  36.                 }   
  37.             },   
  38.             _drawLight:function(){   
  39.                 ctx.save();   
  40.                ctx.fillStyle = "rgba(255,228,150,0.3)";   
  41.                 ctx.beginPath();   
  42.                ctx.arc(this.x , this.y , this.r 3*Math.random() 1 , 0 , 2*Math.PI);   
  43.                 ctx.fill();   
  44.                 ctx.restore();   
  45.             },   
  46.             _boom:function(){    //普通爆炸   
  47.                var fragNum = getRandom(30 , 200);   
  48.                var style = getRandom(0,10)> =5? 1: 2;   
  49.                 var 색상;   
  50.                if(스타일===1){   
  51.                    색상 = {   
  52.                        a:parseInt(getRandom(128,255)),   
  53.                        b:parseInt(getRandom(128,255)),   
  54.                        c:parseInt(getRandom(128,255))   
  55.                    }   
  56.                 }   
  57.   
  58.                var fanwei = parseInt(getRandom(300, 400));   
  59.                for(var i=0;i<fragNum;i ){   
  60.                    if(스타일===2){   
  61.                        색상 = {   
  62.                            a:parseInt(getRandom(128,255)),   
  63.                            b:parseInt(getRandom(128,255)),   
  64.                            c:parseInt(getRandom(128,255))   
  65.                        }   
  66.                     }  
  67.                    var a = getRandom(-Math.PI, Math.PI);   
  68.                    var x = getRandom(0, fanwei) * Math.cos(a)   this.x;   
  69.                    var y = getRandom(0, fanwei) * Math.sin(a)   this.y;    
  70.                    var 반경 = getRandom(0 , 2)   
  71.                    var frag = new Frag(this.x , this.y , radius , color , x , y );   
  72.                    this.booms.push(frag);   
  73.                 }   
  74.             },   
  75.             _shapBoom:function(){    //유형적인 종류의 爆炸   
  76.                var 저것 = 이것;   
  77.                putValue(ocas , octx , this.shape , 5, function(dots){   
  78.                    var dx = 캔버스.width/2-that.x;   
  79.                    var dy = canvas.height/2-that.y;   
  80.                    for(var i=0;i<점.길이;i ){   
  81.                       색상 = {a:dots[i].a,b:dots[i].b,c:dots[i].c}  
  82.                        var x = 점[i].x;   
  83.                        var y = 점[i].y;   
  84.                        var 반경 = 1;   
  85.                        var frag = new Frag(that.x , that.y , radius , color , x- dx , y-dy);   
  86.                        that.booms.push(frag);   
  87.                    }   
  88.                 })   
  89.             }   
  90.         }   


　　【碎屑】

XML/HTML 코드复复内容到剪贴板
  1. var Frag = 함수(centerX , centerY , radius , color ,tx , ty) {   //烟화碎屑对象   
  2.             this.tx = tx;   
  3.             this.ty = ty;   
  4.             this.x = centerX;   
  5.             this.y = centerY;   
  6.             this.dead = false;   
  7.             this.centerX = centerX;   
  8.             this.centerY = centerY;   
  9.             this.radius = radius;   
  10.             this.color = color;   
  11.         }   
  12.   
  13.         Frag.prototype = {   
  14.             paint:function(){   
  15.                 ctx.save();   
  16.                 ctx.beginPath();   
  17.                ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);   
  18.                ctx.fillStyle = "rgba(" this.color.a "," this.color. b "," this.color.c ",1)";   
  19.                 ctx.fill()   
  20.                 ctx.restore();   
  21.             },   
  22.             moveTo:function(index){   
  23.                thisthis.ty = this.ty 0.3;   
  24.                var dx = this.tx - this.x , dy = 이것.ty - this.y;   
  25.                this.x = 수학.abs(dx)<0.1 ? this.tx : (this.x dx*0.1);   
  26.                this.y = 수학.abs(dy)<0.1 ? this.ty : (this.y dy*0.1);   
  27.                if(dx===0 && Math.abs(dy)<=80){
  28.                    this.dead = 참;   
  29.                 }   
  30.                 this.paint();   
  31.             }   
  32.         }  


　　让碎屑产生虚影也很简单,就是每次刷新画布时, 不是擦掉重绘, 而是绘 제조사透ming为0.1（如果想虚影更长，可以把这个值弄的更작은) 背景颜color.

           

XML/HTML 코드复复内容到剪贴板
  1. ctx.save();   
  2.             ctx.fillStyle = "rgba(0,5,24,0.1)";   
  3.             ctx.fillRect(0,0,canvas.width,canvas.height);   
  4.            ctx.restore();  

불꽃놀이를 글꼴, 그림 등 원하는 모양으로 만들어 보세요. 이 작업도 오프스크린 캔버스와 캔버스의 getImageData 메서드를 통해 수행할 수 있습니다. 오프스크린 캔버스는 이름에서 알 수 있듯이 보이지 않는 캔버스입니다. dom 객체가 본문에 할당되지 않는 한 js에서 직접 document.createElement("canvas")를 사용할 수 있습니다. 캔버스 개체는 오프스크린 캔버스의 컨텍스트 개체를 얻은 다음 사용자가 볼 수 없는 곳에서 원하는 모든 작업을 수행할 수 있습니다.

불꽃놀이를 원하는 모양으로 만들려면 먼저 오프스크린 캔버스에 텍스트나 그림을 그린 다음 getImageData를 사용하여 캔버스의 픽셀 배열을 가져온 다음 배열을 순회하여 컬러 픽셀을 얻습니다. 이것이 우리가 원하는 것입니다. 콘텐츠가 저장되면 기본 캔버스 개체에 표시됩니다.

이전 블로그에서 getImageData의 픽셀 처리에 대해 이야기한 적이 있습니다. 사용법을 모르신다면 여기를 클릭하세요. 캔버스를 사용하여 텍스트와 그림의 입자화를 구현하는 방법에 대해 이야기해 보겠습니다.

소스코드 주소: https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/shotFire

관련 라벨：
html5
원천：php.cn
이전 기사：HTML5는 지리적 위치 정보 획득 기능과 positioning_html5 튜토리얼 기술을 구현합니다. 다음 기사：HTML5 캔버스 태그는 스크래치 카드 effect_html5 튜토리얼 기술을 구현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
에서 2024-04-02 11:47:56
0
1
275
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿