検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 Canvas に花火が咲く特殊効果を実装_html5 チュートリアル スキル

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

WBOY
WBOYオリジナル
2016-05-16 15:45:413009ブラウズ

この記事では、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強大的效果驚呆了，一飽眼福了吧。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 Canvas の入門学習tutorial_html5 チュートリアルのスキル次の記事：HTML5 Canvas の入門学習tutorial_html5 チュートリアルのスキル

関連記事

続きを見る