返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5 canvas实现雪花飘落特效

2019-01-28 22:05:15刘景俊
  •         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函数定义如下：

    JavaScript Code复制内容到剪贴板
    1. //画雪花    function DrawSnow() {   
    2.     ctx.clearRect(0, 0, wid, hei);        ctx.fillStyle = "white";   
    3.     ctx.beginPath();        for (var i = 0; i < snow; i++) {   
    4.         var p = arr[i];            ctx.moveTo(p.x, p.y);   
    5.         ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);        }   
    6.     ctx.fill();        SnowFall();   
    7.     ctx.closePath();    }   

    最后执行setInterval(DrawSnow, 50); 

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

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

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>   <html>  
    2.        <head>  
    3.         <meta charset="utf-8" />           <title></title>  
    4.         <script src="js/jquery-1.8.3.min.js"></script>           <style type="text/css">  
    • 相关文章 大家在看