HTML5_html5 チュートリアル スキルを使用して花火エフェクトを作成するチュートリアル

今日は旧正月ですが、旧正月には花火を上げることしか思いつきません。 。 。 。そこで、キャンバスを使用して花火のエフェクトを作成しました。マウスをクリックすると花火が生成されますが、花火から放出されるパーティクルは 30 ～ 200 個です。ページ上のパーティクルの数が一定に達すると、花火が生成されます。時々、ページが非常に固まってしまうことがありますが、私は意図的に Shenma を最適化しませんでした。それについては後で時間があるときに話しましょう。

デモに直接アクセスします: 花火を打ち上げます

原理は非常にシンプルです。 。 。 firework クラスと debris クラスを作成し、それをインスタンス化して飛ばすだけです。そして、一定のポイントに達したら、firework オブジェクトの Dead 属性を true に設定し、その後、一定数の debris オブジェクトをインスタンス化し、ランダムに作成します。デブリ オブジェクトが到達するターゲット ポイントを指定し、そこにすべてのデブリ オブジェクトを飛行させます。

【花火】

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 = 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 = this.c;   
19. ctx.fill();   
20. ctx.restore();   
21. },
22. _move:function(){
23. var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;   
24. thisthis.x = this.x dx*0.01;   
25. thisthis.y = this.y dy*0.01;   
27. if(Math.abs(dx)=this.ba && Math.abs(dy) =this.ba){
28. if(this.shape){
29. this._shapBoom();   
30. }
31. else this._boom();   
32. this.dead = true;   
33. }
34. else {
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 color;   
50. if(スタイル===1){
51. 色 = {
52. a:parseInt(getRandom(128,255)),
53. b:parseInt(getRandom(128,255)),
54. c:parseInt(getRandom(128,255))
55. }
56. }
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 = canvas.width/2-that.x;   
79. var dy = canvas.height/2-that.y;   
80. for(var i=0;idots.length;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 フラグ = function(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 = 半径;   
10. this.color = 色;   
11. }
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 = this.ty - this.y;   
25. this.x = Math.abs(dx)0.1 ? this.tx : (this.x dx*0.1);   
26. this.y = Math.abs(dy)0.1 ? this.ty : (this.y dy*0.1);   
27. if(dx===0 && Math.abs(dy)=80){
28. this.dead = true;   
29. }
30. this.paint();   
31. }
32. }

让碎屑生成虚影也很简单，就是每次刷新画布時，不是擦掉重绘，而是绘制透明度0.1（如果想影虚更长，可以可以把这个值弄的更小）の背景色。その後、虚影が実行されます。つまり、

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 のピクセル処理について説明しましたが、使い方がわからない場合は、ここをクリックしてください: Canvas を使用してテキストと画像の粒子化を実現する方法について話しましょう

ソースコードのアドレス: https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/shotFire