使用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教程