zoukankan      html  css  js  c++  java
  • JavaScript实现HTML5烟花特效

    烟花效果如下(请使用支持HTML5的浏览器查看):
    点击这里查看效果:http://keleyi.com/keleyi/phtml/html5/14.htm 

    源代码如下:

     1 <style>canvas{background-color:#000000;;z-index:9999;}</style>
     2 <canvas id="canvas-keleyi-com"></canvas>
     3 <script>
     4 var c = document.getElementById('canvas-ke'+'leyi-com');
     5 if (!c.getContext) alert('请使用支持HTML5的浏览器,例如Chrome,IE9以上。');
     6 else(function(c, cvs) {
     7 //随着窗口调整画布大小
     8 var W, H;
     9 var up = 0; 
    10 //(onresize = function() {
    11 //     c.width = W = window.innerWidth;
    12 //     c.height = H = window.innerHeight;
    13 //    })();
    14 c.width=W=616;
    15 c.height=H=400;
    16 //生成一个烟花
    17 function createPT(x, y, r, g, b) {
    18 return {
    19 r: r,g: g,b: b,
    20 x: x,y: y,
    21 //轨迹序列
    22 pl: [],
    23 dx: rnd(20) - 10,
    24 dy: rnd(10) - 7,
    25 life: 30 + rnd(30),
    26 //移动函数,修改加速度和坐标
    27 move: function() {
    28 this.dx *= .98;
    29 this.dy *= .98;
    30 this.dy += .22;
    31 this.x += this.dx;
    32 this.y += this.dy;
    33 this.pl.push([this.x, this.y]);
    34 //保持轨迹长度
    35 if (this.pl.length > 10) this.pl.shift();
    36 this.life--;
    37 }
    38 };
    39 }
    40 //总烟火数组
    41 var B = [];
    42 //在x,y位置创建一个烟火
    43 function createBoom(x, y) {
    44 var q = [],
    45 r = rnd(255) | 0,
    46 g = rnd(255) | 0,
    47 b = rnd(255) | 0;
    48 for (var i = 0; i < rnd(16) + 15; i++) q.push(createPT(x, y, r, g, b));
    49 B.push(q);
    50 }
    51 setInterval(function() {
    52 cvs.clearRect(0, 0, W, H);
    53 //依次绘制烟火
    54 for (var n = 0; n < B.length; n++) {
    55 var q = B[n];
    56 for (var i = 0; i < q.length; i++) {
    57 var pt = q[i];
    58 pt.move();
    59 dq(pt.pl, pt.life / 30, pt.r, pt.g, pt.b);
    60 //超过生存周期就消失 柯 乐 义
    61 if (pt.life <= 0) q.splice(i, 1);
    62 }
    63 //当一个烟火包含的烟花个数为零,则消灭这个烟火
    64 if (!B[n].length) B.splice(n, 1);
    65 }
    66 //每隔一段时间添加一个新烟火
    67 if (new Date - up < 2000 + rnd(2000)) return;
    68 up = new Date;
    69 createBoom(rnd(W / 2) + W / 4, rnd(50) + 50);
    70 },20);
    71 function rnd(n) {
    72 return (n || 1) * Math.random();
    73 }
    74 function dq(ar, z, r, g, b) {
    75 cvs.save();
    76 //绘制轨迹。思路是每次都绘制一条透明的轨迹,叠加起来形成一条渐变的样子
    77 for (var i = 0; i < ar.length; i++) {
    78 cvs.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + Math.abs(.2 * z) + ')';
    79 cvs.lineWidth = Math.min(i + 1, 4)*2;
    80 cvs.beginPath();
    81 cvs.moveTo(ar[i][0], ar[i][1]);
    82 for (var j = i + 1; j < ar.length; j++) cvs.lineTo(ar[j][0], ar[j][1]);
    83 cvs.stroke();
    84 }
    85 cvs.restore();
    86 }
    87 })(c, c.getContext('2d'));</script>

    原文:http://keleyi.com/a/bjac/3pipmkmg.htm

    触须:http://keleyi.com/a/bjac/k3pi4ehx.htm

    web前端:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    SaltStack 配置SLS过程
    Python 正则表达式
    Python 矩阵的旋转
    SaltStack 远程执行
    SaltStack 配置管理
    SaltStack
    Python 装饰器
    Python 生产者和消费者模型
    Python 迭代器和生成器
    Python json模块
  • 原文地址:https://www.cnblogs.com/jihua/p/html5yanhua.html
Copyright © 2011-2022 走看看