| OLD | NEW |
| (Empty) |
| 1 var IS_SKV8 = typeof document == "undefined"; | |
| 2 var HAS_PATH = typeof Path2D != "undefined"; | |
| 3 | |
| 4 function circlePath(r) { | |
| 5 if (HAS_PATH) { | |
| 6 var p = new Path2D(); | |
| 7 p.arc(0, 0, r, 0, 2*Math.PI); | |
| 8 p.closePath(); | |
| 9 return p; | |
| 10 } else { | |
| 11 return null; | |
| 12 } | |
| 13 } | |
| 14 | |
| 15 var onDraw = function() { | |
| 16 var W = 500; | |
| 17 var H = 500; | |
| 18 var NumParticles = 100; | |
| 19 | |
| 20 var angle = 0; | |
| 21 var ticks = 0; | |
| 22 var particles =[]; | |
| 23 | |
| 24 for (var i = 0; i < NumParticles; i++) { | |
| 25 particles[i] = { | |
| 26 x: Math.floor(Math.random()*W), | |
| 27 y: Math.floor(Math.random()*H), | |
| 28 r: Math.floor(Math.random()*7+1), | |
| 29 path: circlePath(Math.random()*7+1), | |
| 30 } | |
| 31 } | |
| 32 | |
| 33 function draw(ctx) { | |
| 34 ctx.fillStyle = "#ADD8E6"; | |
| 35 ctx.fillRect(0, 0, W-1, H-1); | |
| 36 ctx.fillStyle = "#FFFFFF"; | |
| 37 | |
| 38 angle += 0.0039; | |
| 39 for (var i = 0; i < particles.length; i++) { | |
| 40 var p = particles[i]; | |
| 41 p.x += Math.floor(Math.sin(angle)*5.0); | |
| 42 p.y += 0.6*p.r; | |
| 43 if (p.x > W) { | |
| 44 p.x-=W; | |
| 45 } | |
| 46 if (p.x < 0) { | |
| 47 p.x += W; | |
| 48 } | |
| 49 if(p.y>(H+1)){ | |
| 50 p.y = 0; | |
| 51 } | |
| 52 if (HAS_PATH) { | |
| 53 ctx.save(); | |
| 54 ctx.translate(p.x, p.y); | |
| 55 ctx.fill(p.path); | |
| 56 ctx.restore(); | |
| 57 } else { | |
| 58 ctx.beginPath(); | |
| 59 ctx.moveTo(p.x, p.y); | |
| 60 ctx.arc(p.x, p.y, p.r, 0, 2*Math.PI, true); | |
| 61 ctx.closePath(); | |
| 62 ctx.fill(); | |
| 63 } | |
| 64 }; | |
| 65 | |
| 66 ticks++; | |
| 67 if (IS_SKV8) { | |
| 68 inval(); | |
| 69 } | |
| 70 } | |
| 71 | |
| 72 function fps() { | |
| 73 console.log(ticks); | |
| 74 ticks = 0; | |
| 75 setTimeout(fps, 1000); | |
| 76 } | |
| 77 | |
| 78 setTimeout(fps, 1000); | |
| 79 | |
| 80 return draw; | |
| 81 }(); | |
| 82 | |
| 83 if (!IS_SKV8) { | |
| 84 window.onload = function(){ | |
| 85 var canvas = document.getElementById("snow"); | |
| 86 var ctx = canvas.getContext("2d"); | |
| 87 function drawCallback() { | |
| 88 onDraw(ctx); | |
| 89 setTimeout(drawCallback, 1); | |
| 90 } | |
| 91 setTimeout(drawCallback, 1); | |
| 92 } | |
| 93 } | |
| 94 | |
| 95 console.log("HAS_PATH: " + HAS_PATH); | |
| OLD | NEW |