简单的粒子动画

PROMULGATOR

爷，@风靡全球%

北京市

← 根据秒数得到天数小时分钟秒

→ 页面切换的效果

相关代码

canvas画ladingview

canvas画图板

canvas炫酷时钟

Html

Css

Js

body {
	background:#45aad7;
	margin:0;
	padding:0;
}
html,body {
	height:100%;
	width:100%;
}
#myCanvas {
	height:100%;
	width:100%;
	display:block;
}

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var particles = [];
for (var i = 0; i < 500; i++) {
    particles.push({
        x: Math.random() * window.innerWidth,
        y: Math.random() * window.innerHeight,
        vx: (Math.random() * 1 - .5),
        vy: (Math.random() * 1 - .5),
        size: 1 + Math.random() * 2,
        color: "#FFF"
    });
}

function timeUpdate(e) {
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
    var len = particles.length;
    var particle;
    for (var i = 0; i < len; i++) {
        particle = particles[i];
        particle.x += particle.vx;
        particle.y += particle.vy;
        if (particle.x <= 0 || particle.x >= window.innerWidth) {
            particle.vx *= -1;
        }
        if (particle.y <= 0 || particle.y >= window.innerHeight) {
            particle.vy *= -1;
        }
        context.fillStyle = particle.color;
        context.beginPath();
        context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
    }
}
setInterval(timeUpdate, 40);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单的粒子动画



代码描述：简单的canvas粒子动画

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单的粒子动画-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号