海外网站推广,关于网站策划的文章,生态文明建设网站,科技袁人袁岚峰这篇文章主要为大家详细介绍了HTML5 canvas实现雪花飘落特效#xff0c;效果实现引人入胜#xff0c;很逼真的动画效果#xff0c;感兴趣的小伙伴们可以参考一下看到网上很多展示html5雪花飞动的效果#xff0c;确实非常引人入胜#xff0c;我相信大家也跟我一样看着心动的…这篇文章主要为大家详细介绍了HTML5 canvas实现雪花飘落特效效果实现引人入胜很逼真的动画效果感兴趣的小伙伴们可以参考一下看到网上很多展示html5雪花飞动的效果确实非常引人入胜我相信大家也跟我一样看着心动的同时也很好奇想研究下代码如何实现虽然很多地方也能下载这些源码不过也不知道别人制作此类动画时的思路及难点分析。我这几天刚好学习了一下也趁着此刻有时间从需求分析、知识点、程序编写一步步给大家解剖下要是在各位关公面前耍大刀了可别见笑哟。最终效果图如下图1一、需求分析1、圆形雪花本示例中雪花形状使用圆形2、雪花数量固定根据图1仔细观察白色雪花数量飘落过程中整张图的雪花数量应该是固定的这个需求是需要通过我们观察分析所得。这与我们现实生活中看到一幅雪花满天飞的场景是一致的。3、雪花大小不一致每朵雪花它们大小各有不同也就意味着雪花的半径是随机的。这与我们现实生活中看到一幅雪花满天飞的场景也是一致的。4、雪花位置在移动雪花飘落自然它们的位置也在移动。二、知识点1、使用Html5 CanvasJavaScript画圆——构成圆形雪花在Html5中需要使用Canvas同时借助JavaScript画圆以构成圆形雪花——arc(x,y,r,start,stop)2、随机数—产生不同半径、坐标的圆形雪花本示例中网页第一次加载时需要生成一定数量的不同半径及位置的雪花故半径、坐标为随机数雪花在飘落过程中其半径不变坐标在一定幅度内变化故此时坐标也为随机数——Math.random()三、程序编写1、准备工作放一个画布canvas并且设置整个body背景色为黑色HTML代码您的浏览器不支持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.widthwid;can.heighthei;此时效果如如下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.fillStylewhite;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; }}}然后将该函数放入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经过我们上述步骤小伙伴们是否已经对整个过程及技术实现很清晰了。完整代码如下(大家可以直接复制到自己项目中执行测试下效果)* {margin: 0;padding: 0;}#mycanvas {background: black;}您的浏览器不支持canvas画布//获取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);好了今天分享就到这里希望对大家的学习有所帮助。以上就是本文的全部内容希望对大家的学习有所帮助更多相关内容请关注PHP中文网相关推荐如何在canvas里面基于随机点绘制一个多边形用HTML5Canvas来绘制三角形和矩形等多边形的方法
