用canvas实现随机动态雪花

最新推荐文章于 2022-01-02 16:59:35 发布

A-Select °

最新推荐文章于 2022-01-02 16:59:35 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/weixin_45959504/article/details/104237131

版权

在这里插入图片描述


```php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    canvas{
        background: #000;
    }
</style>
<body>
    <canvas id = "snow">

    </canvas>
    <script>
        var canvas = document.getElementById('snow');
        var context = canvas.getContext('2d');
        // 获得可视区的宽高
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        function snow(){
            context.save();
            // 开启路径
            context.beginPath();
            // 移动画布，确定雪花终点为中心点
            context.translate(100,100);
            //起点
            context.moveTo(-20,0);
            // 终点
            context.lineTo(20,0);
            // 线变成白色
            context.strokeStyle = '#fff';
            // 线变粗
            context.lineWidth = 10;
            // 线变圆头
            context.lineCap = 'round';
            context.stroke();
            // 角度转弧度
            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();
        }
        // snow();
        //生成雪花的构造函数
        function Snow(x,y,scale,rotate,speedX,speedY,speedR){
                     this.x = x;
                     this.y = y;
                     this.scale = scale;
                     this.rotate = rotate;
                     this.speedX = speedX;
                     this.speedY = speedY;
                     this.speedR = speedR;
                    //  渲染雪花
                    this.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 = 10;
                        context.lineCap = 'round';
                        context.stroke();
                        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 snow = new Snow(50,50,1,10,10,10,10);
        // snow.render();
        // 存储所有生成的雪花
        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;
                    // var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);
                    // snow.render();
                    (function(x,y,scale,rotate,speedX,speedY,speedR){
                        setTimeout(function(){
                        var snow = new Snow(x,0,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);
            }
        
        /**
         * sin60 = 对边/斜边 =>   对边 = sin60*斜边   =>   y=sin60*半径（r）；
         */
    </script>
</body>
</html>

A-Select °

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas实现随机动态雪花

```php<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
复制链接

扫一扫