CSS3 HTML5下雪特效雪花飘飘

阳光穿透心脏的1/2处 2022-08-13 14:46 251阅读 0赞

<!doctype html>
    <html lang="en">
    <head>
    <meta charset=utf-8 />
    <title>CSS3 HTML5下雪特效 雪花飘飘</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        makeSnow("christmasSnow", "bg.jpg");
    });
    function makeSnow(canvasId, imagePath) {
        var christmasSnow = new ChristmasSnow(canvasId, imagePath);
        renderAndUpdate.christmasSnow = christmasSnow;
        setInterval(renderAndUpdate, 15);
    }
    function renderAndUpdate() {
        renderAndUpdate.christmasSnow.render();
        renderAndUpdate.christmasSnow.update();
    }
    function ChristmasSnow(canvasId, imagePath) {
        var snowElement = document.getElementById(canvasId);
        this.canvasContext = snowElement.getContext("2d");
        this.width = snowElement.clientWidth;
        this.heigth = snowElement.clientHeight;
        this.image = initImage(imagePath);
        this.snow = initSnow(this.width, this.heigth);
    }
    function initImage(imagePath) {
        var image = new Image();
        image.src = imagePath;
        return image;
    }
    function initSnow(width, height) {
        var minRasius = 3,
            maxRadius = 10,
            minSpeedY = 1,
            maxSpeedY = 3,
            speedX = 0.05,
            minAlpha = 0.5,
            maxAlpha = 1.0,
            minMoveX = 4,
            maxMoveX = 18;
        var snowSettings = new SnowSettings(minRasius, maxRadius, width, height, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX);
        var snow = [];
        var snowNumber = 200;
        for(var i = 0; i < snowNumber; ++i) {
            snow[i] = new Snow(snowSettings);
        }
        return snow;
    }
    ChristmasSnow.prototype.render = function() {
        this.canvasContext.drawImage(this.image, 0, 0);
        for(var i = 0; i < this.snow.length; ++i) {
            this.snow[i].render(this.canvasContext);
        }
    }
    ChristmasSnow.prototype.update = function() {
        for(var i = 0; i < this.snow.length; ++i) {
            this.snow[i].update();
        }
    }
    function SnowSettings(minRadius, maxRadius, maxX, maxY, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX) {
        this.minRadius = minRadius;
        this.maxRadius = maxRadius;
        this.maxX = maxX;
        this.maxY = maxY;
        this.speedX = speedX;
        this.minSpeedY = minSpeedY;
        this.maxSpeedY = maxSpeedY;
        this.minAlpha = minAlpha;
        this.maxAlpha = maxAlpha;
        this.minMoveX = minMoveX;
        this.maxMoveX = maxMoveX;
    }
    function Snow(snowSettings) {
        this.snowSettings = snowSettings;
        this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);
        this.initialX = Math.random() * snowSettings.maxX;
        this.y = Math.random() * snowSettings.maxY;
        this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);
        this.speedX = snowSettings.speedX;
        this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);
        this.angle = Math.random(Math.PI * 2);
        this.x = this.initialX + Math.sin(this.angle);
        this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);
    }
    Snow.prototype.render = function(canvasContext) {
        canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
        canvasContext.beginPath();
        canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        canvasContext.closePath();
        canvasContext.fill(); 
    }
    Snow.prototype.update = function() {
        this.y += this.speedY;
        if (this.y > this.snowSettings.maxY) {
            this.y -= this.snowSettings.maxY;
        }
        this.angle += this.speedX;
        if (this.angle > Math.PI * 2) {
            this.angle -= Math.PI * 2;
        }
        this.x = this.initialX + this.moveX * Math.sin(this.angle);
    }
    function randomInRange(min, max) {
        var random = Math.random() * (max - min) + min;
        return random;
    }
    </script>
    <style type="text/css">
    body{ margin:0; padding:0; background:#181c59; }
    .main{ width:1210px; height:720px; margin:0 auto;}
    </style>
    </head>
    <body>
    	<div class="main">
        <canvas id="christmasSnow" width="1210px" height="720px">
            您的浏览器不支持 HTML5 canvas标签，无法看到下雪效果.
        </canvas>
        </div>
    </body>
    </html>

**用到的图片：**

![20141101170000423][]

[20141101170000423]: /images/20220810/042105003d6c4165b4ff6b4d382ab1c9.png