标签：black width als margin sep charset ++ UNC window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪花</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#myCanvas {
background: black;
}
</style>
</head>
<body>
<canvas id="myCanvas">
</canvas>
<script>
//获取画布
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");
//画布宽度
var wid = window.innerWidth;
//画布高度
var hei = window.innerHeight;
can.width = wid;
can.height = hei;
var snow = 100;
//半径，坐标
var arr = [];
//保存坐标
for (var i = 0; i < snow; i++) {
arr.push({
x: Math.random() * wid,
y: Math.random() * hei,
r: Math.random() * 10 + 1
})
}
//画雪花
function drowSnow() {
ctx.clearRect(0,0,wid,hei);
ctx.fillStyle = "white";
ctx.beginPath();
for (var i = 0; i < snow; i++) {
var p = arr[i];
ctx.moveTo(p.x,p.y);
ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);
}
ctx.fill();
//雪花飘落
snowFall();
ctx.closePath();
}
//雪花飘落
function snowFall() {
for (var i = 0; i < snow; i++) {
var p = arr[i];
p.y += Math.random() * 2 + 1;
if (p.y > hei) {
p.y = 0;
}
p.x += Math.random() * 2 + 1;
if (p.x > wid) {
p.x = 0;
}
}
}
setInterval(drowSnow, 50);
</script>
</body>
</html>
效果链接:http://runjs.cn/code/end5gyfs
标签：black width als margin sep charset ++ UNC window
原文地址：https://www.cnblogs.com/Longhua-0/p/9126237.html
