基于html5canvas实现漫天飞雪效果实例.pdfVIP

本文实例讲述了基于 html5 canvas 实现漫天飞雪效果的方法， 运行该实例可以看到很棒 的下雪效果。如下图所示： 主要代码如下： gt;gt; lt;html xmlns=lt;a href=gt;gt; lt;headgt; lt;meta http-equiv=Content-Type content=text/html; charset=gb2312 /gt; lt;titlegt; 漫天飞雪 lt;/titlegt; lt;style type=text/cssgt; * {margin: 0; padding: 0;}lt;/pgt; lt;pgt;body { /*You can use any kind of background here.*/ background: #6b92b9; } canvas { display: block; } lt;/stylegt; lt;/headgt;lt;/pgt; lt;pgt;lt;bodygt;lt;/pgt; lt;pgt;lt;div style= background:#6b92b9; width:100%; height:2000px; gt;lt;/divgt; lt;canvas id=canvas style=position:fixed; top:0px;left:0px;z-index:80;pointer-events:none;gt;lt;/canvasgt;lt;/pgt; lt;pgt;lt;scriptgt; window.onload = function(){ //canvas init var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); //canvas dimensions var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; //snowflake particles var mp = 3000; //max particles var particles = []; for(var i = 0; i lt; mp; i++) { particles.push({ x: Math.random()*W, //x-coordinate y: Math.random()*H, //y-coordinate r: Math.random()*3+1, //radius d: Math.random()*mp //density }) } //Lets draw the flakes function draw() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = rgba(255, 255, 255, 0.8); /* ctx.fillStyle = #FF0000;*/ ctx.beginPath(); for(var i = 0; i lt; mp; i++) { var p = particles[i]; ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); } ctx.fill(); upd