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

설날이 다가오니 설날에는 불꽃놀이 생각밖에 떠오르지 않습니다. . . . 그래서 불꽃놀이 효과를 작성하기 위해 캔버스를 사용했습니다. 마우스를 클릭해도 불꽃놀이가 생성되지만 불꽃놀이에서 방출되는 입자는 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;ifragNum;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