使用HTML5 canvas 制做雪花效果

时间  2019-11-08
标签 使用 html5 html canvas 制做 雪花 效果 栏目 HTML5 繁體版
原文   原文链接

在制做圣诞节活动时候要制做下雪的效果。这有2种方法：javascript

1、使用js插件,好比基于jQurey的snow.min.jscss

2、使用Html5的绘图API canvashtml

第一种方法简便,要引入jq，对于小页面会有点浪费,由于要引入jq框架。第二种方法会出现兼容性问题,IE9如下的浏览器不支持或者部分支持HTML5,但制做简单方便，效果好。html5

一个简单的html5绘制雪花的示例以下:java

html部分canvas

<html>浏览器

<head><style type="text/css"> #canvas{background:#000;} </style> </head>框架

<body> <canvas id="canvas"></canvas></body>dom

</html>插件

js部分：

<script type="text/javascript">window.onload=function(){       var _canvas=document.getElementById('canvas'),//获取canvas容器        _ctx=_canvas.getContext('2d'),//获取canvas画布        _h=window.innerHeight,//高度为窗口高度     _w=window.innerWidth,//宽度为窗口宽度        _count=30,//雪花数量     _angle=0,//下落角度           _snow=[];//雪花容器    _canvas.height=_h    _canvas.width=_w;        for(var i=0;i<_count;i++){     _snow.push({        x:Math.random()*_w,     y:Math.random()*_h,     r:Math.random()*9+1,     d:Math.random()*_count    });    }    function _draw(){        _ctx.clearRect(0,0,_w,_h);     _ctx.beginPath();     _ctx.fillStyle="rgba(255,255,255,0.8)";     for(var i=0;i<_count;i++){      var _s=_snow[i];      _ctx.moveTo(_s.x,_s.y);      _ctx.arc(_s.x,_s.y,_s.r,0,Math.PI*2,true);          }     _ctx.fill();     _update();   }      function _update(){       _angle+=0.1;    for(var i=0;i<_count;i++){     var _s=_snow[i];     _s.y+=Math.cos(_angle+_s.d)+1+_s.r/2;     _s.x+=Math.sin(_angle)*2;             if(_s.x>_w+10 || _s.x<-10 || _s.y>_h){      if(i%3>0){       _snow[i]={x:Math.random()*_w,y:-20,r:_s.r,d:_s.d};      }else{        if(Math.sin(_angle)>0){         _snow[i]= {x: -10, y: Math.random()*_h, r: _s.r, d: _s.d};        }else{            _snow[i]= {x:_w+10, y: Math.random()*_h, r: _s.r, d: _s.d};        }      }}         }   }   setInterval(_draw,30);}</script>

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程