コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 Canvas に花火が咲く特殊効果を実装_html5 チュートリアル スキル

HTML5 Canvas に花火が咲く特殊効果を実装_html5 チュートリアル スキル

WBOY
リリース： 2016-05-16 15:45:41
オリジナル
3021 人が閲覧しました

この記事では、HTML5 Canvas で実装された、無料で安全で環境に優しい花火の特殊効果を紹介します。

効果は次のとおりです:

コードは次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <title>キャンバス 实现放烟花特效タイトル>
  5. <meta charset="utf- 8">
  6. <メタ http-equiv=" X-UA 互換" コンテンツ="IE=edge">
  7. <メタ 名前="ビューポート" コンテンツ="width=デバイスの幅,height=デバイスの高さ,初期スケール=1.0,最大スケール=1.0 ,user-scalable=no">
  8. <スタイル タイプ="text/ css">
  9. html,body{高さ:100%;マージン:0;パディング:0}
  10. ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
  11. img{border:0}
  12. body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
  13. canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
  14. #header img{width:100%; 高さ:20%;}
  15. #bg img{width:100%; 高さ:80%;}
  16. #header,#bg{position:fixed;left:0;right:0;z-index:10}
  17. #header{top:0}
  18. #bg{位置:固定;z-index:1;bottom:0}
  19. オーディオ{位置:固定;表示:なし;下:0;左:0;右:0;幅:100%;z-index:5}  
  20. スタイル>
  21. 頭>
  22. <ボディ>
  23. <div id="bg" >
  24. <img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006 .jpg">
  25. div>
  26. <script src="http: //cdn.bootcss.com/jquery/2.2.0/jquery.min.js">スクリプト >
  27. <スクリプト>
  28. $(function(){
  29. var 花火 = 関数(){
  30. var 自分 = これ;   
  31. // 产生烟花随机数
  32. var rand = function(rMi, rMa){
  33. //按位取反运算符
  34. return ~~((Math.random()*(rMa-rMi 1)) rMi);   
  35. },hitTest = 関数(x1, y1, w1, h1, x2, y2, w2, h2){
  36. return !(x1 w1 < x2 || x2 w2 < x1 || y1 h1 y2 || y2 h2 < y1);   
  37. };   
  38. //请求アニメーション画帧
  39. window.requestAnimFrame=function(){
  40. return window.requestAnimationFrame
  41. ||window.webkitRequestAnimationFrame
  42. ||window.mozRequestAnimationFrame
  43. ||window.oRequestAnimationFrame
  44. ||window.msRequestAnimationFrame
  45. ||function(コールバック){
  46. window.setTimeout(callback,1000/60);   
  47. }
  48. }();   
  49. self.init = 関数(){
  50. self.canvas = document.createElement('canvas');     
  51. //canvas 全屏
  52. selfself.canvas.width = self.cw = $(window ).innerWidth();   
  53. selfself.canvas.height = self.ch = $(window ).innerHeight();     
  54. self.particles = [];    
  55. self.partCount = 150;   
  56. self.fireworks = [];    
  57. selfself.mx = self.cw/2;   
  58. selfself.my = self.ch/2;   
  59. self.currentHue = 30;   
  60. self.partSpeed = 5;   
  61. self.partSpeedVariance = 10;   
  62. self.partWind = 50;   
  63. self.partFriction = 5;   
  64. self.partGravity = 1;   
  65. self.hueMin = 0;   
  66. self.hueMax = 360;   
  67. self.fworkSpeed = 4;   
  68. self.fworkAccel = 10;   
  69. self.hueVariance = 30;   
  70. self.flickerDensity = 25;   
  71. self.showShockwave = true;   
  72. self.showTarget = false;   
  73. self.clearAlpha = 25;   
  74. $(document.body).append(self.canvas);   
  75. selfself.ctx = self.canvas.getContext('2d');   
  76. self.ctx.lineCap = 'round';   
  77. self.ctx.lineJoin = 'round';   
  78. self.lineWidth = 1;   
  79. self.bindEvents();      
  80. self.canvasLoop();   
  81. self.canvas.onselectstart = function() {
  82. false を返します。   
  83. };   
  84. };     
  85. // 创建粒子
  86. self.createParticles = function(x,y, hue){
  87. var カウントダウン = self.partCount;   
  88. while(カウントダウン--){
  89. var newParticle = {
  90. x: x,
  91. y: y,
  92. coordLast: [
  93. {x: x, y: y}、
  94. {x: x, y: y}、
  95. {x: x, y: y}
  96. ]、
  97. 角度: rand(0, 360),
  98. speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self .partSpeed self.partSpeedVariance))、
  99. 摩擦: 1 - self.partFriction/100,
  100. gravity: self.partGravity/2,
  101. hue: rand(hue-self.hueVariance, hue self.hueVariance),
  102. 明るさ: rand(50, 80),
  103. アルファ: rand(40,100)/100,
  104. 減衰: rand(10, 50)/1000,
  105. 風: (rand(0, self.partWind) - (self.partWind/2))/25,
  106. lineWidth: self.lineWidth
  107. };       
  108. self.particles.push(newParticle);   
  109. }
  110. };   
  111. // 粒子を更新
  112. self.updateParticles = 関数(){
  113. var i = self.particles.length;   
  114. while(i--){
  115. var p = self.particles[i];   
  116. var ラジアン = p.angle * Math.PI / 180;   
  117. var vx = Math.cos(ラジアン) * p.speed;   
  118. var vy = Math.sin(ラジアン) * p.speed;   
  119. p.速度 *= p.摩擦;   
  120. p.coordLast[2].x = p.coordLast[1].x;   
  121. p.coordLast[2].y = p.coordLast[1].y;   
  122. p.coordLast[1].x = p.coordLast[0].x;   
  123. p.coordLast[1].y = p.coordLast[0].y;   
  124. p.coordLast[0].x = p.x;   
  125. p.coordLast[0].y = p.y;   
  126. p.x = vx;   
  127. p.y = vy;   
  128. p.y = p.gravity;   
  129. p.angle = p.wind;       
  130. p.alpha -= p.decay;   
  131. if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p .alpha < .05){
  132. self.particles.splice(i, 1);    
  133. }
  134. };   
  135. };   
  136. // 绘制粒子
  137. self.drawParticles = 関数(){
  138. var i = self.particles.length;   
  139. while(i--){
  140. var p = self.particles[i];          
  141. var coordRand = (rand(1,3)-1);   
  142. self.ctx.beginPath();           
  143. self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));   
  144. self.ctx.lineTo(Math.round(p.x), Math.round(p.y));   
  145. self.ctx.closePath();       
  146. self.ctx.bloodStyle = 'hsla(' p.hue ', 100%, ' p .brightness '%, ' p.alpha ')';   
  147. self.ctx.ストローク();       
  148. if(self.flickerDensity > 0){
  149. var inverseDensity = 50 - self.flickerDensity;        
  150. if(rand(0, inverseDensity) === inverseDensity){
  151. self.ctx.beginPath();   
  152. self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth 3)/2, 0, Math.PI*2, false)
  153. self.ctx.closePath();   
  154. var randrandAlpha = rand(50,100)/100;   
  155. self.ctx.fillStyle = 'hsla(' p.hue ', 100%, ' p .brightness '%, ' randAlpha ')';   
  156. self.ctx.fill();   
  157. }
  158. }
  159. };   
  160. };   
  161. // 创建烟花
  162. self.createFireworks = function(startX, startY, targetX, targetY){
  163. var newFirework = {
  164. x: startX,
  165. y: startY,
  166. startX: startX,
  167. startY: startY,
  168. hitX: false,
  169. hitY: false,
  170. coordLast: [
  171. {x: startX, y: startY},
  172. {x: startX, y: startY},
  173. {x: startX, y: startY}
  174. ]、
  175. targetX: targetX,
  176. targetY: targetY,
  177. speed: self.fworkSpeed,
  178. angle: Math.atan2(targetY - startY, targetX - startX),
  179. shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)),
  180. 加速度: self.fworkAccel/100,
  181. 色相: self.currentHue、
  182. 明るさ: rand(50, 80),
  183. アルファ: rand(50,100)/100,
  184. lineWidth: self.lineWidth
  185. };      
  186. self.fireworks.push(newFirework);   
  187. };   
  188. // 更新烟花
  189. self.updateFireworks = function(){
  190. var i = self.fireworks.length;   
  191. while(i--){
  192. var f = self.fireworks[i];   
  193. self.ctx.lineWidth = f.lineWidth;   
  194. vx = Math.cos(f.angle) * f.speed,
  195. vy = Math.sin(f.angle) * f.speed;   
  196. f.速度 *= 1 f.加速度;       
  197. f.coordLast[2].x = f.coordLast[1].x;   
  198. f.coordLast[2].y = f.coordLast[1].y;   
  199. f.coordLast[1].x = f.coordLast[0].x;   
  200. f.coordLast[1].y = f.coordLast[0].y;   
  201. f.coordLast[0].x = f.x;   
  202. f.coordLast[0].y = f.y;   
  203. if(f.startX >= f.targetX){
  204. if(f.x vx <= f.targetX){
  205. ff.x = f.targetX;   
  206. f.hitX = true;   
  207. } else {
  208. f.x = vx;   
  209. }
  210. } else {
  211. if(f.x vx >= f.targetX){
  212. ff.x = f.targetX;   
  213. f.hitX = true;   
  214. } else {
  215. f.x = vx;   
  216. }  
  217. }
  218. if(f.startY >= f.targetY){
  219. if(f.y vy <= f.targetY){
  220. ff.y = f.targetY;   
  221. f.hitY = true;   
  222. } else {
  223. f.y = vy;   
  224. }
  225. } else {
  226. if(f.y vy >= f.targetY){
  227. ff.y = f.targetY;   
  228. f.hitY = true;   
  229. } else {
  230. f.y = vy;   
  231. }
  232. }
  233. if(f.hitX && f.hitY){
  234. self.createParticles(f.targetX, f.targetY, f.hue);   
  235. self.fireworks.splice(i, 1);   
  236. }
  237. };   
  238. };   
  239. // 绘制烟花
  240. self.drawFireworks = 関数(){
  241. var i = self.fireworks.length;   
  242. self.ctx.globalCompositeOperation = 'lighter';   
  243. while(i--){
  244. var f = self.fireworks[i];     
  245. self.ctx.lineWidth = f.lineWidth;   
  246. var coordRand = (rand(1,3)-1);        
  247. self.ctx.beginPath();          
  248. self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));   
  249. self.ctx.lineTo(Math.round(f.x), Math.round(f.y));   
  250. self.ctx.closePath();   
  251. self.ctx.bloodStyle = 'hsla(' f.hue ', 100%, ' f .brightness '%, ' f.alpha ')';   
  252. self.ctx.ストローク();    
  253. if(self.showTarget){
  254. self.ctx.save();   
  255. self.ctx.beginPath();   
  256. self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
  257. self.ctx.closePath();   
  258. self.ctx.lineWidth = 1;   
  259. self.ctx.ストローク();   
  260. self.ctx.restore();   
  261. }  
  262. if(self.showShockwave){
  263. self.ctx.save();   
  264. self.ctx.translate(Math.round(f.x), Math.round(f.y));   
  265. self.ctx.rotate(f.shockwaveAngle);   
  266. self.ctx.beginPath();   
  267. self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);   
  268. self.ctx.bloodStyle = 'hsla(' f.hue ', 100%, ' f .brightness '%, ' rand(25, 60)/100 ')';   
  269. self.ctx.lineWidth = f.lineWidth;   
  270. self.ctx.ストローク();   
  271. self.ctx.restore();   
  272. }
  273. };   
  274. };   
  275. // 绑定イベント
  276. self.bindEvents = function(){
  277. $(window).on('resize', function(){
  278. clearTimeout(self.timeout);   
  279. self.timeout = setTimeout(function() {
  280. selfself.canvas.width = self.cw = $(window ).innerWidth();   
  281. selfself.canvas.height = self.ch = $(window ).innerHeight();   
  282. self.ctx.lineCap = 'round';   
  283. self.ctx.lineJoin = 'round';   
  284. }, 100);   
  285. });   
  286. $(self.canvas).on('mousedown', function(e){
  287. self.mx = e.pageX - self.canvas.offsetLeft;   
  288. self.my = e.pageY - self.canvas.offsetTop;   
  289. self.currentHue = rand(self.hueMin, self.hueMax);   
  290. self.createFireworks(self.cw/2, self.ch, self.mx, self.my);    
  291. $(self.canvas).on('mousemove.fireworks', function(e){
  292. self.mx = e.pageX - self.canvas.offsetLeft;   
  293. self.my = e.pageY - self.canvas.offsetTop;   
  294. self.currentHue = rand(self.hueMin, self.hueMax);   
  295. self.createFireworks(self.cw/2, self.ch, self.mx, self.my);            
  296. });       
  297. });   
  298. $(self.canvas).on('mouseup', function(e){
  299. $(self.canvas).off('mousemove.fireworks');            
  300. });   
  301. };   
  302. self.clear = 関数(){
  303. self.particles = [];   
  304. self.fireworks = [];   
  305. self.ctx.clearRect(0, 0, self.cw, self.ch);   
  306. };   
  307. self.canvasLoop = function(){
  308. requestAnimFrame(self.canvasLoop, self.canvas);      
  309. self.ctx.globalCompositeOperation = 'destination-out';   
  310. self.ctx.fillStyle = 'rgba(0,0,0,' self.clearAlpha/ 100 ')';   
  311. self.ctx.fillRect(0,0,self.cw,self.ch);   
  312. self.updateFireworks();   
  313. self.updateParticles();   
  314. self.drawFireworks();      
  315. self.drawParticles();   
  316. };   
  317. self.init();     
  318. }  
  319.    var fworks = new
    320.    $('#info-toggle').on('click', function(e){   
    321.     $('#info-inner').stop(false, true).slideToggle(100);   
    322.     e.preventDefault();   
    323.    });    
    324.   });   
    325.  
  325. 腳本>  
    326.  
  326. 畫布 寬度=寬度= 🎜> 身高="449">> >
  327.      身體>
  328.    html>
  

不是被HTML5強大的效果驚呆了，一飽眼福了吧。
関連ラベル：
canvas html5
ソース：php.cn
前の記事：HTML5 Canvas の入門学習tutorial_html5 チュートリアルのスキル 次の記事：マルチパースペクティブ 3D 回転可能な HTML5 ロゴアニメーション_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 の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート