canvas漫天飞雪效果代码
分类：实例代码
canvas漫天飞雪效果代码属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它利用canvas实现了满天飞雪效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#myCanvas {
background-color: #87CEEB;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var practicles = [];
for (var count = 0; count < 500; count++) { //循环生成500粒
practicles.push({
x: Math.random() * (window.innerWidth),
y: Math.random() * (window.innerHeight),
vx: Math.random() - 0.5,
vy: Math.random() + 0.5,
size: Math.random() * 3 + 1,
color: "#FFF"
})
}
function timeUpdate() {
context.clearRect(0, 0, window.innerWidth, window.innerHeight); //清除画布区域
var practicle;
for (var count = 0; count < 500; count++) {
var practicle = practicles[count];
practicle.x += practicles[count].vx;
practicle.y += practicles[count].vy;
if (practicle.x < 0) {
practicle.x = window.innerWidth
}
if (practicle.x > window.innerWidth) {
practicle.x = 0
}
if (practicle.y > window.innerHeight) {
practicle.y = 0
}
context.beginPath();
context.arc(practicle.x, practicle.y, practicle.size, 0, Math.PI * 2)
context.closePath();
context.fillStyle = practicle.color;
context.fill();
}
}
setInterval(timeUpdate, 40);
</script>
</body>
</html>
canvas漫天飞雪效果代码，这样的场景在实际项目中还是用的比较多的，关于canvas漫天飞雪效果代码就介绍到这了。