<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>canvas雪花练习</title> <style> body { margin: 0; padding: 0; overflow: hidden; } canvas { background-color: black; } </style> </head> <body> <canvas id="snow"></canvas> <script> var canvas = document.getElementsByTagName("canvas")[0]; var context = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; function Snow(x, y, scale, rotate, speedX, speedY, speedR) { this.x = x; this.y = y; this.scale = scale; this.speedX = speedX; this.speedY = speedY; this.speedR = speedR; this.rotate = rotate; } Snow.prototype.render = function () { context.save(); context.beginPath(); context.translate(this.x, this.y); context.scale(this.scale, this.scale); context.rotate(this.rotate * Math.PI / 180); context.moveTo(-20, 0); context.lineTo(20, 0); context.strokeStyle = "#fff"; context.lineWidth = 5; context.lineCap = "round"; var disX = Math.sin((30 * Math.PI) / 180) * 20; var disY = Math.sin((60 * Math.PI) / 180) * 20; context.moveTo(-disX, -disY); context.lineTo(disX, disY); context.moveTo(-disX, disY); context.lineTo(disX, -disY); context.stroke(); context.restore(); }; var snowArray = []; function init() { var len = 100; for (var i = 0; i < len; i++) { var x = Math.random() * canvas.width; var scale = Math.random() + 0.5; var rotate = Math.random() * 60; var speedX = Math.random() + 1; var speedY = Math.random() + 5; var speedR = Math.random() * 4 + 2; (function (x, y, scale, rotate, speedX, speedY, speedR) { setTimeout(function () { var snow = new Snow(x, y, scale, rotate, speedX, speedY, speedR); snow.render(); snowArray.push(snow); }, Math.random() * 8000); })(x, 0, scale, rotate, speedX, speedY, speedR); } snowing(); } init(); function snowing() { setInterval(function () { context.clearRect(0,0, canvas.width,canvas.height) for (var i = 0; i < snowArray.length; i++) { snowArray[i].x = (snowArray[i].x + snowArray[i].speedX) % canvas.width; snowArray[i].y = (snowArray[i].y + snowArray[i].speedY) % canvas.height; snowArray[i].rotate = (snowArray[i].rotate + snowArray[i].speedR) % 60; snowArray[i].render(); } }, 30); } </script> </body></html>
