canvas画雪花

最新推荐文章于 2024-10-09 09:50:54 发布

不归少年

最新推荐文章于 2024-10-09 09:50:54 发布

阅读量497

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/102478674

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas画雪花</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    body,html {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var num=200;//雪花个数
        var snow=[];//二维数组，存放雪花信息

        // 1、获取canvas
        var canvas=document.getElementById("canvas");
        // 2、设置canvas画布的尺寸、画布环境
        var w=document.documentElement.clientWidth;//获取浏览器的宽 相关的知识点？？？
        var h=document.documentElement.clientHeight;
        canvas.width=w;
        canvas.height=h;
        //画布环境
        var disition=canvas.getContext("2d");//getContext是一个方法，需要有参数
        //3、绘制地图   地图的位置 大小 map  drawImage()方法
        drawMap();
        function drawMap(){
            //新建一个图片对象，说明图片的src
            var img=new Image();
            img.src="./img/2.jpg";
            //在画布环境中绘制地图
            //绘制图像、画布或视频  绘制图像的某些部分、以及/或者增加或减少图像的尺寸
            //   参数（img,x,y,width,hight）
            disition.drawImage(img,0,0,w,h);
        }
        // 4、画雪花  个数200、每个雪花都是图片 宽高相等且大小、位置随机
        for(var i=0;i<num;i++){
            // 创建雪花
            var image=new Image();
            // 雪花水平移动方向标记 0,1
            image.setAttribute("data-way",Math.floor(Math.random()*2));
            image.src="./img/snow.png";
            var sw=randomSw();//雪花大小
            var x=randomPos(w)-sw;//雪花位置  -sw？如果x接近w，减去sw，就不会出现雪花一半的情况
            var y=randomPos(600);
            disition.drawImage(image,x,y,sw,sw);
            // 每一片雪花信息
            snow.push([image,x,y,sw]);
        }
        // 雪花大小  10-30px
        function randomSw(){
            return Math.random()*20+10;
        }
        // 雪花位置
        function randomPos(w){
            // 0-画布尺寸 随机
            return Math.random()*w;
        }
        // 5、雪花动画、循环
        loop();
        function loop(){
            //清空给定矩形内的指定像素 参数（x，y，width，height）
            // 清空上一次的内容，并且重新绘制地图
            disition.clearRect(0,0,w,h);
            drawMap();
            for(var i=0;i<snow.length;i++){
                var rx;//水平位置
                // 左右移动  snow[i][1]是一个数值，在此值的基础上进行加减
                if(snow[i][0].getAttribute("data-way")=="0"){
                    rx= ++snow[i][1];
                }
                else {
                    rx=--snow[i][1];
                }
                //if(rx>w)
                if(rx>w){
                    snow[i][1]=0;
                }
                // if(rx<0)  和雪花的位置设置方法一样
                if(rx<0){
                    snow[i][1]=w-snow[i][3];
                }
                // 竖直方向
                var cy=++snow[i][2];
                if(cy>=600){
                    snow[i][2]=0;
                }
                //将雪花绘制进画布中 
                disition.drawImage(snow[i][0],rx,cy,snow[i][3],snow[i][3]);
            }
            // 执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
            window.requestAnimationFrame(loop);
        }
    </script>
</body>
</html>