HTML5动态背景的源代码

!doctype html>
    html>
    head>
    meta charset="UTF-8">
    title>
    HTML5动态背景/title>
    style>
body {
    background-color: #000000;
    overflow: hidden;
}
canvas {
    position: absolute;
}
    /style>
    /head>
    body>
    canvas id="myCanvas">
    /canvas>
    script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    // 设置canvas宽度和高度canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 创建一个放置所有粒子的数组var particles = [];
// 创建粒子对象function Particle() {
    this.x = canvas.width * Math.random();
    this.y = canvas.height * Math.random();
    this.velY = Math.random() * 50;
    this.velX = Math.random() * 50;
    this.size = Math.random() * 5 + 1;
    this.life = Math.random() * 100 + 50;
    this.opacity = Math.random() * 0.5;
}
// 在canvas上绘制粒子Particle.prototype.draw = function() {
    ctx.globalAlpha = this.opacity;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
}
    ;
// 更新粒子位置和透明度Particle.prototype.update = function(index) {
    if (this.life

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！