collect some code

最新推荐文章于 2022-08-01 16:15:33 发布

dishan0258

最新推荐文章于 2022-08-01 16:15:33 发布

阅读量121

点赞数

原文链接：http://www.cnblogs.com/liqunblog/p/11232928.html

版权

 <canvas id = 'matrixBG'></canvas>
 <script>
    var width = matrixBG.width = window.screen.width;
    var height = matrixBG.height = window.screen.height;
    var yPositions = Array(300).join(0).split('');
    var ctx=matrixBG.getContext('2d');
    
    var draw = function () {
      ctx.fillStyle='rgba(0,0,0,.05)';
      ctx.fillRect(0,0,width,height);
      ctx.fillStyle='#

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    //先判断是否支持动画  计时器
    window.requestAnimationFrame = (function () {
        return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function (callback) {
                    //调用开始函数  10毫秒
                    window.setTimeout(callback, 10);
                }
    })();
    //获取canvas元素
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    cw = window.innerWidth;
    ch = window.innerHeight;
 
    //定义烟花数组
    fireworks = [];
    //定义爆炸的烟花屑
    particles = [];
    hue = 120;
    /* 初始化色调*/
    timerTotal = 10;
    /*每隔20下释放一次烟花*/
    timerTick = 0;
    canvas.width = cw;
    canvas.height = ch;
    //生成min max 之间的随机数
    function random(min, max) {
        return Math.random() * (max - min) + min;
    }
    //计算点sx sy 到 tx ty 之间的距离
    function caculateDistance(sx, sy, tx, ty) {
        var xDistance = sx - tx,
                yDistance = sy - ty;
        return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
    }
 
    //烟花对象sx sy初始位置  tx ty目标位置
    function Firework(sx, sy, tx, ty) {
        this.x = sx;
        this.y = sy;
        this.sx = sx;
        this.sy = sy;
        this.tx = tx;
        this.ty = ty;
        //计算初始位置到目标位置之间的距离
        this.distanceToTarget = caculateDistance(sx, sy, tx, ty);
        //以运行距离
        this.distanceTraveled = 0;
        //定义变量生运动轨迹
        this.coordinates = [];
        this.coordinatesCount = 3;
        while (this.coordinatesCount--) {
            this.coordinates.push([this.x, this.y]);
        }
        //初始位置到目标位置的角度
        this.angle = Math.atan2(ty - sy, tx - sx);
        this.speed = 2;//初始速度
        this.acceleration = 1.05;//加速度
        this.brightness = random(50, 70); //明度
        this.targetRadius = 5; //目标位置标示圆圈的初始半径
    }
    //开始更新烟花的位置
    Firework.prototype.update = function (index) {
        this.coordinates.pop();
        this.coordinates.push([this.x, this.y]);
        //让目标圆圈动起来
        if (this.targetRadius < 8) {
            this.targetRadius += 0.3;
        }
        else {
            this.targetRadius = 1;
        }
        //根据加速度来确定速度
        this.speed *= this.acceleration;
        //计算水平方向速度
        var vx = Math.cos(this.angle) * this.speed;
        var vy = Math.sin(this.angle) * this.speed;
        //重新计算烟花运行的距离
        this.distanceTraveled = caculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
        //如果烟花运行距离大于或等于初始位置到目标位置之间的距离，生成新烟花并移除当前烟花，否则更新烟花位置
        if (this.distanceTraveled >= this.distanceToTarget) {
            createParticles(this.tx, this.ty);
            fireworks.splice(index, 1);
        }
        else {
            this.x += vx;
            this.y += vy;
        }
    }
    //烟花运行轨迹
    Firework.prototype.draw = function () {
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
        ctx.lineTo(this.x, this.y);
        ctx.strokeStyle = 'hsl(' + hue + ',100%,' + this.brightness + '%)';
        ctx.stroke();
        //画出目标位置的小圆圈
        ctx.beginPath();
        ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2);
        ctx.stroke();
    }
    //烟花爆炸
    function Particle(x, y) {
        this.x = x;
        this.y = y;
        this.coordinates = [];
        this.coordinatesCount = 10;
        while (this.coordinatesCount--) {
            this.coordinates.push([this.x, this.y]);
        }
        //生成任意方向的碎屑
        this.angle = random(0, 2 * Math.PI);
        this.speed = random(1, 10);//随机速度
        this.friction = 0.95;//摩擦力
        this.gravity = 1;//重力
        this.hue = random(hue - 20, hue + 20);//生成色彩相近的碎屑
        this.brightness = random(50, 80);//随机透明
        this.alpha = 1;//初始化透明度
        this.decay = random(0.015, 0.03);//碎屑消失时间
    }
    Particle.prototype.update = function (index) {
        this.coordinates.pop();
        this.coordinates.unshift([this.x, this.y]);
        this.speed *= this.friction;
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed + this.gravity;
        this.alpha -= this.decay;
        if (this.alpha <= this.decay) {
            particles.splice(index, 1);
        }
    }
    //画碎屑轨迹
    Particle.prototype.draw = function () {
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
        ctx.lineTo(this.x, this.y);
        ctx.strokeStyle = 'hsla(' + this.hue + ',100%,' + this.brightness + '%,' + this.alpha + ')';
        ctx.stroke();
    }
    function createParticles(x, y) {
        //生成30个烟花碎屑
        var particleCount = 300;
        while (particleCount--) {
            particles.push(new Particle(x, y));
        }
    }
    function loop() {
        requestAnimationFrame(loop);
        hue += 0.5;
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, cw, ch);
        ctx.globalCompositeOperation = 'lighter';
        var i = fireworks.length;
        while (i--) {
            fireworks[i].draw();
            fireworks[i].update(i);
        }
        var i = particles.length;
        while (i--) {
            particles[i].draw();
            particles[i].update(i);
        }
        if (timerTick >= timerTotal) {
            fireworks.push(new Firework(cw / 2, ch, random(0, cw), random(0, ch / 2)));
            timerTick = 0;
        } else {
            timerTick++;
        }
    }
    window.onload = loop();
</script>
</body>
</html>

0FF';
      ctx.font = '10pt Georgia';
      yPositions.map(function(y, index){
        text = String.fromCharCode(30+Math.floor( Math.random()*95 ));
        x = (index * 10)+10;
        matrixBG.getContext('2d').fillText(text, x, y);
        if(y > 100 + Math.random()*1e4)
        {
          yPositions[index]=0;
        }
        else
        {
          yPositions[index] = y + 10;
        }
      });
    };
    RunMatrix();
    function RunMatrix()
    {
        if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
                Game_Interval = setInterval(draw, 33);
    }
 </script>

arr.reduce((prev, args) => prev.then(() =>bar(arg)), Promise.resolve());

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

let a;
({ a } = { a: 1 });

const arr = [1,2,3,4];
const { 3: third } = arr;

转载于:https://www.cnblogs.com/liqunblog/p/11232928.html

dishan0258

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
collect some code

<canvas id = 'matrixBG'></canvas> <script> var width = matrixBG.width = window.screen.width; var height = matrixBG.height = window.screen.height; var yPositi...
复制链接

扫一扫