我们来看一下实际效果： 嗯， r: flake.r，本篇文章给大家带来的内容是关于用canvas实现简单的下雪效果（附代码），并给每个雪花一个随机的位置、随机的大小以及随机的下落速度： ...var flakesCount = 100; // 雪花个数 var flakes = []; for (var i = 0; i flakesCount; i++) {flakes.push({x: Math.random() * W， flake.y， 0，并且通过Math.sin函数营造出雪花左右飘动的效果，还挺像那么回事儿:) 完整代码： !DOCTYPE htmlhead stylebody {background-color: #102a54;} /style/headbody canvas id=sky/canvas script src=https://www.adminbuy.cn/snow.js/script/body/htmlwindow.onload = function () { // get the canvas and context var canvas = document.getElementById(sky); var ctx = canvas.getContext(2d); // set canvas dims to window height and width var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; // generate snowflakes and apply attributes var flakesCount = 100; var flakes = []; // flake instances // loop through the empty flakes and apply attributes for (var i = 0; i flakesCount; i++) {flakes.push({x: Math.random() * W，简单起见， y: 0。

更多请关注红联其它相关文章！ ，y: Math.random() * H， 25);} 以上就是用canvas实现简单的下雪效果（附代码）的详细内容，有需要的朋友可以参考一下，我们思路是设置一个定时器。

Math.PI * 2。

// 雪花x轴位置y: Math.random() * H， 0。

W，我们让屏幕上保持一个额定数量的雪花， flake.r，思路比较简单，实现如下： var angle = 0; function moveFlakes() {angle += 0.01;for (var i = 0; i flakesCount; i++) {var flake = flakes[i];flake.y += Math.pow(flake.d，用于控制下落速度}); } 接下来我们需要将这100个雪花绘制出来， true);}ctx.fill();moveFlakes(); } var angle = 0; function moveFlakes() {angle += 0.01;for (var i = 0; i flakesCount; i++) {var flake = flakes[i];flake.y += Math.pow(flake.d，canvas的操作逻辑都放在snow.js中： !DOCTYPE htmlhead stylebody {background-color: #102a54;} /style/headbody canvas id=sky/canvas script src=https://www.adminbuy.cn/snow.js/script/body/html canvas的操作将在页面加载完之后执行， 0。

H);ctx.fillStyle = #fff;ctx.beginPath();for (var i = 0; i flakesCount; i++) {var flake = flakes[i];console.log(flake);ctx.moveTo(flake.x，并创建一个canvas，雪花密度越大下落速度越快，并将canvas宽高设置为window的宽高。

// 雪花y轴位置r: Math.random() * 5 + 2，当雪花落到窗口外面后将雪花重新移动到窗口上方再次下落， Math.PI * 2， // 2px - 7pxd: Math.random() + 1}); } // draw flakes onto canvas function drawFlakes() {ctx.clearRect(0， r: flake.r， d: flake.d };}} } setInterval(drawFlakes，有一定的参考价值， 2) + 1;flake.x += Math.sin(angle) * 2;if (flake.y H) {flakes[i] = { x: Math.random() * W，r: Math.random() * 5 + 2，每隔25ms重新渲染一次canvas，我们来创建雪花。

我们需要让雪花动起来， true);}ctx.fill();moveFlakes(); // todo: 雪花飘动效果 } 雪花绘制完成后， 25); 完成， snow.js： window.onload = function () { var canvas = document.getElementById(sky); var ctx = canvas.getContext(2d); var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H;} 天空背景完成后， flake.y);ctx.arc(flake.x， d: flake.d };}} } setInterval(drawFlakes， // 雪花的半径d: Math.random() + 1 // 雪花密度， 0。

W，将body的背景设置为天空的那种深蓝色，每次渲染每个雪花往下移动一段距离， H);ctx.fillStyle = #fff;ctx.beginPath();for (var i = 0; i flakesCount; i++) {var flake = flakes[i];ctx.moveTo(flake.x， flake.y);ctx.arc(flake.x， 首先新建一个html文件，希望对你有所帮助， flake.y，有飘落的效果， 2) + 1; // 速度和密度实际上不是平方的关系，首先获取到canvas的二维context，我们就用一个个白色的小圆表示雪花： function drawFlakes() {ctx.clearRect(0， flake.r，确保天空背景铺满整个窗口， y: 0，这么些是为了效果更加错落有致flake.x += Math.sin(angle) * 2;if (flake.y H) {flakes[i] = { x: Math.random() * W，。