GVKun编程网logo

如何使用HTML5 canvas实现雪花飘落（css雪花飘落效果）

11

本文的目的是介绍如何使用HTML5canvas实现雪花飘落的详细情况，特别关注css雪花飘落效果的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解如何使用HTML5ca

本文的目的是介绍如何使用HTML5 canvas实现雪花飘落的详细情况，特别关注css雪花飘落效果的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解如何使用HTML5 canvas实现雪花飘落的机会，同时也不会遗漏关于canvas实现雪花随机动态飘落效果（代码示例）、canvas实现雪花飘啊飘，圣诞节快乐、CSS3 实现雪花飘落动画、CSS3如何实现雪花飘落特效的知识。

本文目录一览：

如何使用HTML5 canvas实现雪花飘落（css雪花飘落效果）

如何使用HTML5 canvas实现雪花飘落（css雪花飘落效果）

这篇文章主要为大家详细介绍了HTML5 canvas实现雪花飘落特效，效果实现引人入胜，很逼真的动画效果，感兴趣的小伙伴们可以参考一下

看到网上很多展示html5雪花飞动的效果，确实非常引人入胜，我相信大家也跟我一样看着心动的同时，也很好奇，想研究下代码如何实现；虽然很多地方也能下载这些源码，不过也不知道别人制作此类动画时的思路及难点分析。

我这几天刚好学习了一下，也趁着此刻有时间从需求分析、知识点、程序编写一步步给大家解剖下，要是在各位关公面前耍大刀了，可别见笑哟。

最终效果图如下：

图1

一、需求分析

1、圆形雪花

本示例中雪花形状使用圆形

2、雪花数量固定

根据图1仔细观察白色雪花数量，飘落过程中，整张图的雪花数量应该是固定的，这个需求是需要通过我们观察分析所得。这与我们现实生活中看到一幅雪花满天飞的场景是一致的。

3、雪花大小不一致

每朵雪花它们大小各有不同，也就意味着雪花的半径是随机的。这与我们现实生活中看到一幅雪花满天飞的场景也是一致的。

4、雪花位置在移动

雪花飘落，自然它们的位置也在移动。

二、知识点

1、使用Html5 Canvas+JavaScript画圆——构成圆形雪花

在Html5中，需要使用Canvas同时借助JavaScript画圆，以构成圆形雪花——arc(x,y,r,start,stop)；

2、随机数—产生不同半径、坐标的圆形雪花

本示例中，网页第一次加载时，需要生成一定数量的不同半径及位置的雪花，故半径、坐标为随机数；雪花在飘落过程中，其半径不变，坐标在一定幅度内变化，故此时坐标也为随机数——Math.random()

三、程序编写

1、准备工作

放一个画布canvas，并且设置整个body背景色为黑色

HTML代码：

<canvas id=mycanvas>
    您的浏览器不支持canvas画布   
</canvas>

CSS代码：

* {   
    margin: 0;   
    padding: 0;   
}   
#mycanvas {   
    background: black;   
}

此时效果如如下：

注意：canvas默认是有一个初始化高度和宽度的，所以不用去纠结

2、画布满屏显示

JavaScript代码如下：

//获取mycanvas画布   
    var can = document.getElementById(mycanvas);   
    var ctx = can.getContext(2d);   
    //画布宽度   
    var wid = window.innerWidth;   
    //画布高度   
    var hei = window.innerHeight;   
    can.width=wid;   
    can.height=hei;

此时效果如如下：

3、初始化生成固定数量的雪花

根据我们上述需求分析及知识点解读，首先雪花的数量是固定的，所以我们需要定义一个变量var sNow = 100；这里假设雪花数量为100,；

生成雪花的时候，每个雪花半径、位置都不同，我们把每个雪花当做一个对象，那么这个对象的属性就包含：半径、坐标（X、Y），那么一个雪花对象可以写成var sNowOject={x:1,y:10,r:5}，这里就代表一个坐标为(1,10)半径为5的圆形雪花；本示例中由于半径和坐标都为随机数，故使用Math.random()分别为100个雪花生成半径、坐标（X、Y）；

那我们这里是100个雪花，所以为了方便后面操作，就用一个数组保存这100个雪花对象。

JavaScript代码如下：

//雪花数目   
var sNow = 100;   
//雪花坐标、半径   
var arr = []; //保存各圆坐标及半径   
for (var i = 0; i < sNow; i++) {   
arr.push({   
x: Math.random() * wid,   
y: Math.random() * hei,   
r: Math.random() * 10 + 1   
})   
}

4、绘制雪花

上面我们已经将100个雪花半径、坐标（X、Y）生成，下面就是循环使用canvas画出雪花了（这里就是画圆），这里定义一个函数

JavaScript代码如下：

//画雪花   
function DrawSNow() {   
    ctx.fillStyle=white;   
    ctx.beginPath();   
    for (var i = 0; i < sNow; i++) {   
        var p = arr[i];   
        ctx.moveto(p.x,p.y);   
        ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);   
    }   
    ctx.fill();   
  
    ctx.closePath();

然后调用 DrawSNow()函数，效果如下：

可以尝试多次刷新网页看是否会生成不同大小、位置的雪花（正常情况下是可以的），做到这里就已经接近最终效果了

注意：由于这里需要绘制100个圆，所以每当画一个圆时重新定义绘制开始坐标即：ctx.moveto(p.x,p.y);否则会出现异样效果，不信可以试试呀

5、雪花飘动

上面我们已经画出100个雪花，可惜只能依靠刷新网页才能看到变化效果，但是我们需要实现的是雪花不停的移动位置。

首先我们需要借助setInterval函数不停的重画雪花，这里间隔时间为50毫秒：setInterval(DrawSNow,50);

同时每一朵雪花的坐标（X、Y）需要不停的改变（在一定幅度内），我们这里的雪花是从左上方飘落到右下方，所以每朵X、Y坐标值都在不停的增大，那我们用一个函数SNowFall()定义雪花飘过规则

该函数代码如下：

//雪花飘落   
function SNowFall() {   
    for (var i = 0; i < sNow; i++) {   
        var p = arr[i];   
        p.y += Math.random() * 2 + 1;   
        if (p.y > hei) {   
            p.y = 0;   
        }   
        p.x += Math.random() * 2 + 1;   
        if (p.x > wid) {   
            p.x = 0;   
    <span style=white-space:pre>    </span>}   
    }   
}

然后将该函数放入DrawSNow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSNow()函数体内必须在前面执行clearRect()函数，即：ctx.clearRect(0, 0, wid, hei);

此时DrawSNow函数定义如下：

//画雪花   
function DrawSNow() {   
    ctx.clearRect(0, 0, wid, hei);   
    ctx.fillStyle = white;   
    ctx.beginPath();   
    for (var i = 0; i < sNow; i++) {   
        var p = arr[i];   
        ctx.moveto(p.x, p.y);   
        ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
    }   
    ctx.fill();   
    SNowFall();   
    ctx.closePath();   
}

最后执行setInterval(DrawSNow, 50);

OK，经过我们上述步骤，小伙伴们是否已经对整个过程及技术实现很清晰了。

完整代码如下（大家可以直接复制到自己项目中执行，测试下效果）：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <Meta charset=utf-8 />  
        <title></title>  
        <script src=js/jquery-1.8.3.min.js></script>  
        <style type=text/css>  
            * {   
                margin: 0;   
                padding: 0;   
            }   
               
            #mycanvas {   
                background: black;   
            }   
        </style>  
    </head>  
  
    <body>  
        <canvas id=mycanvas>  
            您的浏览器不支持canvas画布   
        </canvas>  
        <script>  
            //获取mycanvas画布   
            var can = document.getElementById(mycanvas);   
            var ctx = can.getContext(2d);   
            //画布宽度   
            var wid = window.innerWidth;   
            //画布高度   
            var hei = window.innerHeight;   
            can.width = wid;   
            can.height = hei;   
            //雪花数目   
            var sNow = 100;   
            //雪花坐标、半径   
            var arr = []; //保存各圆坐标及半径   
            for (var i = 0; i < sNow; i++) {   
                arr.push({   
                    x: Math.random() * wid,   
                    y: Math.random() * hei,   
                    r: Math.random() * 10 + 1   
                })   
            }   
            //画雪花   
            function DrawSNow() {   
                ctx.clearRect(0, 0, wid, hei);   
                ctx.fillStyle = white;   
                ctx.beginPath();   
                for (var i = 0; i < sNow; i++) {   
                    var p = arr[i];   
                    ctx.moveto(p.x, p.y);   
                    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
                }   
                ctx.fill();   
                SNowFall();   
                ctx.closePath();   
            }   
            //雪花飘落   
            function SNowFall() {   
                for (var i = 0; i < sNow; i++) {   
                    var p = arr[i];   
                    p.y += Math.random() * 2 + 1;   
                    if (p.y > hei) {   
                        p.y = 0;   
                    }   
                    p.x += Math.random() * 2 + 1;   
                    if (p.x > wid) {   
                        p.x = 0;   
                    }   
                }   
            }   
            setInterval(DrawSNow, 50);   
        </script>  
    </body>  
  
</html>

好了，今天分享就到这里，希望对大家的学习有所帮助。

canvas实现雪花随机动态飘落效果（代码示例）

canvas实现雪花随机动态飘落效果（代码示例）

本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

canvas实现雪花随机动态飘落效果（代码示例）

用canvas实现雪花随机动态飘落，代码如下

<!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(&#39;snow&#39;);
    var context = canvas.getContext(&#39;2d&#39;);
    // 获得可视区的宽高
    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 = &#39;#fff&#39;;
      // 线变粗
      context.lineWidth = 10;
      // 线变圆头
      context.lineCap = &#39;round&#39;;
      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 = &#39;#fff&#39;;
            context.lineWidth = 10;
            context.lineCap = &#39;round&#39;;
            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>
登录后复制

动态效果图：

1.gif

更多炫酷CSS3、HTML5、jQuery、Javascript特效，推荐访问：js特效网！

以上就是canvas实现雪花随机动态飘落效果（代码示例）的详细内容，更多请关注php中文网其它相关文章！

canvas实现雪花飘啊飘，圣诞节快乐

canvas实现雪花飘啊飘，圣诞节快乐

雪花飘啊飘


CSS3 实现雪花飘落动画

CSS3 实现雪花飘落动画

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no, email=no">
	<title>snowflake</title>
	<script type="text/javascript" src="http://w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			background-color: #333;
			font-size: 14px;
			color: #BCBCBC;
		}
		input {
			border: solid 0px #DDD;
			border-radius: 5px;
			padding: 5px 10px;
			width: 120px;
		}
		button {
			border: solid 0px #CCC;
			border-radius: 5px;
			background-color: #FFF;
			padding: 5px 10px;
		}
		#sky {
			width: 100%;
			max-width: 640px;
			height: 100%;
			background-color: #A39;
			margin: 0 auto;
			position: relative;
    		overflow: hidden;
		}
		.snowflake {
			width: 50px;
			height: 50px;
			border-radius: 50px;
			background-color: rgba(255, 255, 255, 0.5);
			position: absolute;
			top: 10px;
			left: 100px;
			display: inline-block;
			transition: top 2s;
			-moz-transition: top 2s;/* Firefox 4 */
			-webkit-transition: top 2s;/* Safari 和 Chrome */
			-o-transition: top 2s;
			transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
			-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
			-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
			-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
		}
		#operate {
			text-align: right;
		}
		#operate div {
			margin: 10px;
		}
	</style>
</head>
<body>
	<div id="sky"></div>
	<div id="operate">
		<div>
			<label>下雪频率(ms): <input name="rate" type="number" min="1" /></label>
		</div>
		<div>
			<label>融化时间(ms): <input name="melt" type="number" min="0" /></label>
		</div>
		<div>
			<button id="start-or-stop" onclick="startOrStop()">start</button>
		</div>
	</div>
	<script type="text/javascript">
	var $sky = $(''#sky'');
	var maxTop = $sky.height() - 5;// 地面高度值(px)
	var rate = 60;// 飘落频率(ms)
	var flakeSize = 10;// 单片雪花宽高值(px)
	var melt = 2000;// 融化时间(ms)

	// 初始化雪花
	function snowflake(size, alpha, top, left) {
		var s = document.createElement(''div'');
		$(s).css({
			''width'': size,
			''height'': size,
			''border-radius'': size,
			''background-color'': ''rgba(255,255,255,'' + alpha + '')'',
			''top'': -50,
			''left'': left,
		}).addClass(''snowflake'');
		return s;
	}

	// 雪花飘落并融化
	function dift($s) {
		$s.css(''top'', maxTop + (flakeSize - $s.width()) / 2);

		setTimeout(function() {
			$s.remove();
		}, 2000 + melt);
	}

	// 开始动画
	var animateId = -1;
	var it = false;
	function start() {
		if(!it) {
			it = setInterval(function() {
				// 初始化雪花
				var id = ''s_'' + (++animateId);
				var size = Math.random() * flakeSize + 2;
				var alpha = Math.random() * 0.7 + 0.1;
				var left = Math.random() * $(window).width();
				var s = snowflake(size, alpha, 0, left);
				var $s = $(s).attr(''id'', id);
				$sky.get(0).appendChild(s);

				// 雪花飘落
				setTimeout(function() {
					dift($s);
				}, 100);

				if(animateId > 10000) {// 避免越界
					animateId = 0;
				}
			}, rate);
			$(''#start-or-stop'').html(''stop'');
		}
	}
	start();

	// 停止动画
	function stop() {
		clearInterval(it);
		it = false;
		$(''#start-or-stop'').html(''start'');
	}

	// 开始或暂停动画
	function startOrStop() {
		if(!it) {
			start();
		} else {
			stop();
		}
	}

	// 重启动画
	function restart() {
		stop();
		start();
	}

	$(function() {
		// 监听rate输入框
		var minRate = 1, maxRate = 3000;
		$(''input[name="rate"]'').val(rate).on(''change'', function() {
			rate = parseInt($(this).val());
			if(rate < minRate) {
				rate = minRate;
				$(this).val(rate);
			} else if(rate > maxRate) {
				rate = maxRate;
				$(this).val(rate);
			}

			restart();
		}).prop({
			min: minRate,
			max: maxRate
		});

		// 监听melt输入框
		var minMalt = 0, maxMelt = 100000;
		$(''input[name="melt"]'').val(melt).on(''change'', function() {
			melt = parseInt($(this).val());
			if(melt < minMalt) {
				melt = minMalt;
				$(this).val(melt);
			} else if(melt > maxMelt) {
				melt = maxMelt;
				$(this).val(melt);
			}

			restart();
		}).prop({
			min: minMalt,
			max: maxMelt
		});
	});
	</script>
</body>
</html>


CSS3如何实现雪花飘落特效

CSS3如何实现雪花飘落特效

这篇文章主要介绍“CSS3如何实现雪花飘落特效”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3如何实现雪花飘落特效”文章能帮助大家解决问题。

在CSS3中我们可以使用animation属性来创建复杂的动画效果，包括移动，旋转，缩放，倾斜（后几个请参考css3中的transform，scale等属性）等。而这一切，只需要我们创建关键帧（@keyframes），然后将自己想要实现的动作添加进去就可以实现。
比如：

@keyframes bgchange{
from {background:red;}
to {background:yellow}
}
div:hover{
animation:bgchange 5s;
}

当鼠标悬停在<div>时，该<div>的背景颜色会在五秒之内从红色变为黄色。
注意：使用animation和@keyframes时不同浏览器需要加上不同的前缀名！
下面代码实现雪花飘落功能：

<!DOCTYPE HTML>
<html>
<head>
<Meta charset="UTF-8" />
<title>sNowing sNow</title>
<style>
body{
background: #eee;
}
@keyframes mysNow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
transform: rotate(1080deg);
}
100%{
transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-webkit-keyframes mysNow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-webkit-transform: rotate(1080deg);
}
100%{
-webkit-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-moz-keyframes mysNow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-moz-transform: rotate(1080deg);
}
100%{
-moz-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-ms-keyframes mysNow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-ms-transform: rotate(1080deg);
}
100%{
-ms-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-o-keyframes mysNow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-o-transform: rotate(1080deg);
}
100%{
-o-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
.roll{
position:absolute;
opacity:0;
animation: mysNow 5s ;
-webkit-animation: mysNow 5s ;
-moz-animation: mysNow 5s ;
-ms-animation: mysNow 5s ;
-o-animation: mysNow 5s ;
height:80px;
}
.div{
position:fixed;
}
</style>
</head>
<body>
<div id="sNowzone" >
</div>
</body>
<script>
(function(){
function sNow(left,height,src){
var div = document.createElement("div");
var img = document.createElement("img");
div.appendChild(img);
img.className = "roll";
img.src = src;
div.style.left=left+"px";
div.style.height=height+"px";
div.className="div";
document.getElementById("sNowzone").appendChild(div);
setTimeout(function(){
document.getElementById("sNowzone").removeChild(div);
// console.log(window.innerHeight);
},5000);
}
setInterval(function(){
var left = Math.random()*window.innerWidth;
var height = Math.random()*window.innerHeight;
var src = "s"+Math.floor(Math.random()*2+1)+".png";//两张图片分别为"s1.png"、"s2.png"
sNow(left,height,src);
},500);
})();
</script>
</html>

关于“CSS3如何实现雪花飘落特效”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注小编行业资讯频道，小编每天都会为大家更新不同的知识点。

今天关于如何使用HTML5 canvas实现雪花飘落和css雪花飘落效果的介绍到此结束，谢谢您的阅读，有关canvas实现雪花随机动态飘落效果（代码示例）、canvas实现雪花飘啊飘，圣诞节快乐、CSS3 实现雪花飘落动画、CSS3如何实现雪花飘落特效等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇html – 用户可以编辑页面源,操纵隐藏的字段值,然后使用这些值发布表单吗？

下一篇HTML5的Canvas实现绘制曲线的方法（html5 canvas绘图）

相关文章