H5雪花飘落效果

最新推荐文章于 2022-09-25 12:56:55 发布
最新推荐文章于 2022-09-25 12:56:55 发布
阅读量1k 收藏 8
点赞数 2
分类专栏： 前端练手项目 文章标签： canvas javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiqiang_xiong/article/details/108506023
版权

H5绘制雪花，JS实现雪花旋转飘落


主要运用canvas+js实现

效果图
雪花效果图

步骤：

  • 定义雪花： 每片雪花有3条线，每两条线的夹角为60度，每条线长度的一半为snowLength,中点为坐标原点；为了美观，线的长度与宽度的比为一定值；雪花下落自身旋转，给每片雪花一个水平和竖直的随机速度
  • 画出一片雪花 ： 画布中顶部区域随机一个点，取这一点画一条倾斜随机角度（不要太大，否则后面旋转效果不明显）的线，根据三角函数求出线的两端点的坐标，再依次计算出另外两条线；
  • 让画出的线直接旋转是做不了的（反正我没试出来），但可以让下次画出的线在当前展示的线上旋转一个角度，清空当前的线再展示出来，只要线的颜色一样就有旋转效果.

语言太无力，直接上图（请原谅我拙劣的画图功底）
雪花图解

HTML部分：

    <canvas height="700px" width="1500px"></canvas>

CSS样式部分：

	* {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

        :root {
            height: 100%;
        }

        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
        }

        canvas {
            border: 1px solid black;
            box-sizing: border-box;
            background-image:url('./src/timg.jpg');
            background-size: cover;
        }

JavaScript部分：

准备工作：

 		var oCanvas = document.getElementsByTagName('canvas')[0];
        var ctx = oCanvas.getContext('2d');
        
        // 获取画布宽高
        var height = oCanvas.height;
        var width = oCanvas.width;
        
       	// 初始旋转角度的倍数
        var rotateCount = 0;

生成一片随机雪的信息（在画布的位置、大小、长度、x轴和y轴的速度、自身旋转速度）

		function randomSnow() {
            var left = parseInt(Math.random() * width);
            var top = 50;
            var snowRotateDeg = parseInt(Math.random() * 10 + 5);
            var snowLength = parseInt(Math.random() * 10 + 10) / 2;    //该值为雪花每条线的一半
            var snowSpeedX = parseInt(Math.random() * 10 + 3);
            var snowSpeedY = parseInt(Math.random() * 10 + 2);

           	// 让画布中一半的雪花向左下角移动
            if (Math.random() < 0.5) {
                snowSpeedX *= (.5 - Math.random()) * 2;
            }

            // 将雪花信息返回到外面
            return {
                left: left,
                top: top,
                snowRotateDeg: snowRotateDeg,
                snowLength: snowLength,
                snowSpeedX: snowSpeedX,
                snowSpeedY: snowSpeedY
            }

       	}

根据随机生成的雪的信息在画布中画出雪花 （调试时建议用不同的颜色便于观察,看我画的图便于理解）

        function drawSnow(deg, snow) {
            ctx.beginPath();

            // θ角满足正弦规律，即0度时渲染雪花的一条线为竖直方向；θ1表示雪花第一条线与y轴正半轴的夹角
            var θ1 = deg % 60 * (Math.PI / 180);
            ctx.moveTo(snow.left + snow.snowLength * Math.sin(θ1), snow.top + snow.snowLength * Math.cos(θ1));
            ctx.lineTo(snow.left - snow.snowLength * Math.sin(θ1), snow.top - snow.snowLength * Math.cos(θ1));
            ctx.strokeStyle = "#fff";
            ctx.lineCap = 'round';
            ctx.lineWidth = snow.snowLength * 4 / 9;
            ctx.stroke();
            ctx.beginPath();

            // θ1表示雪花第二条线与y轴正半轴的夹角
            var θ2 = (60 - deg % 60) * (Math.PI / 180);
            ctx.moveTo(snow.left - snow.snowLength * Math.sin(θ2), snow.top + snow.snowLength * Math.cos(θ2));
            ctx.lineTo(snow.left + snow.snowLength * Math.sin(θ2), snow.top - snow.snowLength * Math.cos(θ2));
            ctx.strokeStyle = "#fff";
            ctx.lineCap = 'round';
            ctx.lineWidth = snow.snowLength * 4 / 9;
            ctx.stroke();
            ctx.beginPath();

            var θ3;
            if (deg % 60 + 60 > 90) {
                // 随着后续的旋转，deg值会越来越大，也就存在摩除60还比30大的情况，而此时雪花的第三条线就会被挤到随机点的第四象限中，并横跨二、四象限
                // 该θ3表示雪花第三条线与x轴正半轴的夹角
                θ3 = (deg % 60 - 30) * (Math.PI / 180);
                ctx.moveTo(snow.left - snow.snowLength * Math.cos(θ3), snow.top + snow.snowLength * Math.sin(θ3));
                ctx.lineTo(snow.left + snow.snowLength * Math.cos(θ3), snow.top - snow.snowLength * Math.sin(θ3));
            } else {

                // 该θ3表示雪花第三条线第一次渲染时与x轴正半轴的夹角
                θ3 = (30 - deg % 60) * (Math.PI / 180);
                ctx.moveTo(snow.left - snow.snowLength * Math.cos(θ3), snow.top - snow.snowLength * Math.sin(θ3));
                ctx.lineTo(snow.left + snow.snowLength * Math.cos(θ3), snow.top + snow.snowLength * Math.sin(θ3));
            }
            ctx.strokeStyle = "#fff";
            ctx.lineCap = 'round';
            ctx.lineWidth = snow.snowLength * 4 / 9;
            ctx.stroke();
        }

绘制雪花：

		var snowArr = [];

        // 每个30毫秒创建一片雪花，
        setInterval(function () {
            var snow = randomSnow();
            snowArr.push(snow);
            snowArr = snowArr.filter(function (item) {

                //容器保存当前还在画布的雪花       
                return item.top < height;
            })
        }, 30)

每隔一定时间清除画布并重绘页面

		setInterval(function () {
            ctx.clearRect(0, 0, width, height);
            snowArr.forEach(function (ele, index) {
                drawSnow(ele.snowRotateDeg * rotateCount, ele);
                ele.top += ele.snowSpeedY;
                ele.left += ele.snowSpeedX;
            })
            rotateCount++;
        }, 50)

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

        :root {
            height: 100%;

        }

        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
        }

        canvas {
            border: 1px solid black;
            box-sizing: border-box;
            background-image:url('./src/timg.jpg');
            background-size: cover;
        }
    </style>
</head>

<body>
    <canvas height="700px" width="1500px"></canvas>
    <script>
        var oCanvas = document.getElementsByTagName('canvas')[0];
        var ctx = oCanvas.getContext('2d');
        
        // 获取画布宽高
        var height = oCanvas.height;
        var width = oCanvas.width;

        // 初始旋转角度的倍数
        var rotateCount = 0; 

        // 生成一片随机雪的信息（在画布的位置、大小、长度、x轴和y轴的速度、自身旋转速度）
        function randomSnow() {
            var left = parseInt(Math.random() * width);
            var top = 50;
            var snowRotateDeg = parseInt(Math.random() * 10 + 5);
            var snowLength = parseInt(Math.random() * 10 + 10) / 2;    //该值为雪花每条线的一半
            var snowSpeedX = parseInt(Math.random() * 10 + 3);
            var snowSpeedY = parseInt(Math.random() * 10 + 2);

            // 让画布中一半的雪花向左下角移动
            if (Math.random() < 0.5) {
               
                snowSpeedX *= (.5 - Math.random()) * 2;

            }else{
                // snowSpeedX /= 5;
            }

            // 将雪花信息返回到外面
            return {
                left: left,
                top: top,
                snowRotateDeg: snowRotateDeg,
                snowLength: snowLength,
                snowSpeedX: snowSpeedX,
                snowSpeedY: snowSpeedY
            }

        }


        // 根据随机生成的雪的信息在画布中画出雪花  
        function drawSnow(deg, snow) {
            ctx.beginPath();

            // θ角满足正弦规律，即0度时渲染雪花的一条线为竖直方向；θ1表示雪花第一条线与y轴正半轴的夹角
            var θ1 = deg % 60 * (Math.PI / 180);
            ctx.moveTo(snow.left + snow.snowLength * Math.sin(θ1), snow.top + snow.snowLength * Math.cos(θ1));
            ctx.lineTo(snow.left - snow.snowLength * Math.sin(θ1), snow.top - snow.snowLength * Math.cos(θ1));
            ctx.strokeStyle = "#fff";
            ctx.lineCap = 'round';
            ctx.lineWidth = snow.snowLength * 4 / 9;
            ctx.stroke();
            ctx.beginPath();

            // θ1表示雪花第二条线与y轴正半轴的夹角
            var θ2 = (60 - deg % 60) * (Math.PI / 180);

            ctx.moveTo(snow.left - snow.snowLength * Math.sin(θ2), snow.top + snow.snowLength * Math.cos(θ2));
            ctx.lineTo(snow.left + snow.snowLength * Math.sin(θ2), snow.top - snow.snowLength * Math.cos(θ2));
            ctx.strokeStyle = "#fff";
            ctx.lineCap = 'round';
            ctx.lineWidth = snow.snowLength * 4 / 9;
            ctx.stroke();
            ctx.beginPath();

            var θ3;
            if (deg % 60 + 60 > 90) {
                // 随着后续的旋转，deg值会越来越大，也就存在摩除60还比30大的情况，而此时雪花的第三条线就会被挤到随机点的第四象限中，并横跨二、四象限
                // 该θ3表示雪花第三条线与x轴正半轴的夹角
                θ3 = (deg % 60 - 30) * (Math.PI / 180);
                ctx.moveTo(snow.left - snow.snowLength * Math.cos(θ3), snow.top + snow.snowLength * Math.sin(θ3));
                ctx.lineTo(snow.left + snow.snowLength * Math.cos(θ3), snow.top - snow.snowLength * Math.sin(θ3));
            } else {

                // 该θ3表示雪花第三条线第一次渲染时与x轴正半轴的夹角
                θ3 = (30 - deg % 60) * (Math.PI / 180);
                ctx.moveTo(snow.left - snow.snowLength * Math.cos(θ3), snow.top - snow.snowLength * Math.sin(θ3));
                ctx.lineTo(snow.left + snow.snowLength * Math.cos(θ3), snow.top + snow.snowLength * Math.sin(θ3));
            }
            ctx.strokeStyle = "#fff";
            ctx.lineCap = 'round';
            ctx.lineWidth = snow.snowLength * 4 / 9;
            ctx.stroke();

        }

        // 在画布中展示的雪花
        var snowArr = [];

        // 每个30毫秒创建一片雪花，
        setInterval(function () {
            var snow = randomSnow();
            snowArr.push(snow);
            snowArr = snowArr.filter(function (item) {

                // 容器只保存当前还在画布的雪花
                return item.top < height;
            })
        }, 30)

        // 每50毫秒重新绘制一次画布
        setInterval(function () {
            ctx.clearRect(0, 0, width, height);
            snowArr.forEach(function (ele, index) {
                drawSnow(ele.snowRotateDeg * rotateCount, ele);
                ele.top += ele.snowSpeedY;
                ele.left += ele.snowSpeedX;
            })
            rotateCount++;
        }, 50)



    </script>
</body>
</html>

背景图片

背景

Zhiqiang_Xiong
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[H5动画制作系列]雪花随机产生飘落
格码老师教编程
10-23 190
【代码】[H5动画制作系列]雪花随机产生飘落。
html掉落本地图片效果
java_t_t的博客
07-02 1254
html掉落本地图片效果
html5落叶效果,使用Html5实现树叶飘落的效果
weixin_35775608的博客
06-03 782
实现如图所示的东西效果(落叶下落)：html代码：HTML5树叶飘落动画这是基于webkit的落叶动画css代码：body{background-color: #4E4226;}#container {position: relative;height: 700px;width: 500px;margin: 10px auto;overflow: hidden;border: 4px solid ...
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6157
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
html5中雪花晕开的效果,分享两种圣诞节雪花特效JS代码(网站下雪效果)
weixin_30472793的博客
06-04 1523
今天是圣诞节，首先，张戈在这里祝所有朋友节日快乐！虽然我对圣诞节并不感冒，不过既然是公开的博客，那还是搞搞气氛吧！测试了网上找的几个代码，下面分享一下我个人比较满意的2种。看代码之前，先分享一下即时预览的方法：很简单，在webkit浏览器(比如谷歌)按下F12，然后在console里面粘贴一下JS代码(不含前后的script标签)，然后回车执行即可看到效果了。一、下雪特效代码①(function(...
H5透明雪花飘落背景动画特效
06-24
H5透明雪花飘落背景动画特效是一款基于HTML5 Canvas实现的全屏雪花动画，透明白皑皑的雪花元素背景特效。
雪花屏幕飘落H5特效代码
12-19
屏幕掉落雪花H5源码特效，适用于新手开发练手使用。 代码简洁，无冗余广告等；特效简单，容易实现； 下雪特效原生JS+H5实现；
H5透明雪花飘落背景动画特效.zip
最新发布
10-09
非常实用的特效代码，可以完美运行，可以二次修改！
h5 实现视频动画效果
02-27
使用 纯h5 实现视频动画效果的代码 示例，减少浏览器的资源加载，适用于短片段的制作
html实现雪花飘落
qq_61851946的博客
01-29 9938
就快过年了，先给大家????们拜个早年。 ???????????? 今天我们来学习一下如何在html里加入雪花飘落的特效，需要使用到的知识：画布（Canvas）和js作画。 首先我们先建立一个画布 var canvas =document.getElementById("canvas") var context = canvas.getContext("2d") //2d 即指二维平面 var w =window.innerWidth var h =window.i
HTML5 唯美雪花飘落
07-25
HTML5 唯美雪花飘落 场景，跟随鼠标动态效果
HTML5+WebGL 3D雪花飘落动画特效
06-11
HTML5+WebGL 3D雪花飘落动画特效，比较逼真的一款下雪网页背景动画效果。
HTML5Canvas雪花动画特效代码
03-07
HTML5雪花动画场景特效是一款基于canvas绘制的雪花飘落的场景特效。
javascript实现雪花飘落效果
10-14
主要为大家详细介绍了javascript实现雪花飘落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
雪花飘落特效源码
07-12
canvas特效，雪花飘零，还有3d特效，总体来说不错！。
vue之事件绑定
deep_zhuheihei的博客
07-20 281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
css3简单实现页面中出现雪花飘落效果
热门推荐
喵大嗷的博客
12-22 1万+
快要到圣诞节了，浏览了常去看的学习网站，发现那个网站多了一层雪花飘落的遮罩层，感觉挺有假日气氛的。就自己尝试写了个简单的雪花飘落的遮罩层，大致效果如下： 雪花是透明背景的图片，通过css动画来调整雪花图片位置，来实现雪花飘落的动效。为了突出雪花，body的背景色设置成了黑色。。。其实雪花就只是一个遮罩层，下面的背景应该是原来的网页，自己模拟的就只写雪花效果 话不多说了，上代码<style>
JS实现雪花飘落特效效果
这里是博客标题
09-15 1万+
1、概述： 以任意图片作为背景，在背景上添加雪花下落的特效效果，此处使用随机颜色、随机大小的彩色雪花实现。 2、效果实现功能： （1）雪花随机出现并随机消失； （2）雪花出现时大小随机； （3）雪花颜色随机； （4）雪花颜色逐渐变淡并消失； （5）雪花消失后删除其对象，减轻系统负担。 3、实现原理： 采用<canvas></canvas>画布标签实现，在画...
h5 翻书效果 源码
09-10
H5翻书效果源码是一段用于实现网页翻书效果的代码。H5是指HTML5，是一种用于构建和展示网页的技术标准。翻书效果是指在网页中实现书本翻页的动画效果。 以下是一个简单的H5翻书效果源码示例： ```html <!DOCTYPE ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值