本篇内容主要讲解“怎么使用html5实现雪花效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用html5实现雪花效果”吧!

一、canvas是什么？

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

二、canvas的基本用法

1.创建一个画布（Canvas）：

<canvasid="myCanvas"width="200"height="100"></canvas>

2.使用JavaScript绘制图像：

//首先找到<canvas>元素varc=document.getElementById("myCanvas");//然后创建context对象varctx=c.getContext("2d");//下面的两行代码绘制一个红色的矩形：ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000。

3.Canvas 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
ctx.fillRect(0,0,150,75);
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

4.Canvas - 路径

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

使用arc() 画一个圆:

varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();三、实现雪花飘动的思路

1.创建一个画布（Canvas）

varcanvas=document.getElementById("canvas")//参数contextID指定了您想要在画布上绘制的类型。//当前唯一的合法值是"2d"，它指定了二维绘图，//并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。varcontext=canvas.getContext("2d")varw=window.innerWidthvarh=window.innerHeightcanvas.width=w;canvas.height=h;

2.创建雪花的对象数组

varcount=200//雪花的个数varsnows=[]//雪花对象数组for(vari=0;i<count;i++){snows.push({x:Math.random()*w,//Math.random()用于生成0～1的随机数y:Math.random()*h,r:Math.random()*5,})}

3.绘制雪花样式

functiondraw(){context.clearRect(0,0,w,h)context.beginPath()for(vari=0;i<count;i++){varsnow=snows[i];//遍历每一片雪花context.fillStyle="rgb(255,255,255)"//设置雪花的样式context.shadowBlur=10;context.shadowColor="rgb(255,255,255)";//moveTo的方法是可以移动到指定的坐标context.moveTo(snow.x,snow.y)//使用canvasarc()创建一个圆形//x，y，r：圆的中心的x坐标和y坐标，r为半径//0,Math.PI*2起始弧度和结束弧度context.arc(snow.x,snow.y,snow.r,0,Math.PI*2)}//画布填充context.fill()move()}

4.实现雪花飘动

functionmove(){for(vari=0;i<count;i++){varsnow=snows[i];snow.y+=(7-snow.r)/10//从上往下飘落snow.x+=((5-snow.r)/10)//从左到右飘落if(snow.y>h){snows[i]={x:Math.random()*w,y:Math.random()*h,r:Math.random()*5,}}}}

5.设置刷新

draw()//每毫秒刷新一次setInterval(draw,1)

6.完整代码:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>雪花飘飘之使用canvas元素用于在网页上绘制图形。</title><styletype="text/css">*{margin:0;padding:0;/*background-color:seagreen;*/background:url("雪人.jpg")no-repeat;background-size:100%100%;}/*.can{filter:blur(1px);}*/</style></head><body><canvasid="canvas"class="can"></canvas><scripttype="text/javascript">//canvas元素用于在网页上绘制图形。varcanvas=document.getElementById("canvas")//参数contextID指定了您想要在画布上绘制的类型。//当前唯一的合法值是"2d"，它指定了二维绘图，//并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。varcontext=canvas.getContext("2d")varw=window.innerWidthvarh=window.innerHeightcanvas.width=w;canvas.height=h;varcount=200//雪花的个数varsnows=[]//雪花对象数组for(vari=0;i<count;i++){snows.push({x:Math.random()*w,//Math.random()用于生成0～1的随机数y:Math.random()*h,r:Math.random()*5,})}//绘制雪花functiondraw(){context.clearRect(0,0,w,h)context.beginPath()for(vari=0;i<count;i++){varsnow=snows[i];//遍历每一片雪花context.fillStyle="rgb(255,255,255)"//设置雪花的样式context.shadowBlur=10;context.shadowColor="rgb(255,255,255)";//moveTo的方法是可以移动到指定的坐标context.moveTo(snow.x,snow.y)//使用canvasarc()创建一个圆形//x，y，r：圆的中心的x坐标和y坐标，r为半径//0,Math.PI*2起始弧度和结束弧度context.arc(snow.x,snow.y,snow.r,0,Math.PI*2)}//画布填充context.fill()move()}//雪花飘动functionmove(){for(vari=0;i<count;i++){varsnow=snows[i];snow.y+=(7-snow.r)/10//从上往下飘落snow.x+=((5-snow.r)/10)//从左到右飘落if(snow.y>h){snows[i]={x:Math.random()*w,y:Math.random()*h,r:Math.random()*5,}}}}draw()//每毫秒刷新一次setInterval(draw,1)</script></body></html>

到此，相信大家对“怎么使用html5实现雪花效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！