html 5重力图片源代码

HTML 5 重力图片源代码是一种HTML语言的标签和属性组合，它能够实现图片的重力和运动效果，可以为网站的视觉效果以及用户交互性带来一些新的体验。

!DOCTYPE html>
    html>
    head>
    title>
    HTML 5 重力图片示例/title>
    meta charset="UTF-8">
    style>
canvas {
    border: solid 1px #333;
}
    /style>
    /head>
    body>
    canvas id="canvas" width="800" height="600">
    /canvas>
    script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
function Particle(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random()*255) + ')';
    this.vx = Math.random() * 10 - 5;
    this.vy = Math.random() * 10 - 5;
}
Particle.prototype.move = function() {
    this.x += this.vx;
    this.y += this.vy;
}
    ;
Particle.prototype.draw = function() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = this.color;
    context.fill();
}
    ;
Particle.prototype.checkCollision = function() {
if (this.x - this.radius  0) {
    this.x = this.radius;
    this.vx *= -1;
}
    if (this.x + this.radius >
 canvas.width) {
    this.x = canvas.width - this.radius;
    this.vx *= -1;
}
if (this.y - this.radius  0) {
    this.y = this.radius;
    this.vy *= -1;
}
    if (this.y + this.radius >
 canvas.height) {
    this.y = canvas.height - this.radius;
    this.vy *= -1;
}
}
    ;
    var particles = [];
    for (var i = 0;
     i  20;
 i++) {
    particles.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 20));
}
function animate() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0;
     i  particles.length;
 i++) {
    particles[i].draw();
    particles[i].move();
    particles[i].checkCollision();
}
    requestAnimationFrame(animate);
}
    animate();
    /script>
    /body>
    /html>
    

上述代码展示了一个基本的重力图片运动的动画，其中包含了一个名为Particle的构造函数，用于创建粒子对象。通过对粒子对象的vx和vy值来控制粒子的运动方向和速度，并在每一帧中进行碰撞检测，来实现物理效果。此外，还使用了HTML 5中的Canvas标签和Web Animation API的requestAnimationFrame函数来实现动画效果。

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