var IS_SKV8 = typeof document == "undefined"; var HAS_PATH = typeof Path2D != "undefined"; function circlePath(r) { if (HAS_PATH) { var p = new Path2D(); p.arc(0, 0, r, 0, 2*Math.PI); p.closePath(); return p; } else { return null; } } var onDraw = function() { var W = 500; var H = 500; var NumParticles = 100; var angle = 0; var ticks = 0; var particles =[]; for (var i = 0; i < NumParticles; i++) { particles[i] = { x: Math.floor(Math.random()*W), y: Math.floor(Math.random()*H), r: Math.floor(Math.random()*7+1), path: circlePath(Math.random()*7+1), } } function draw(ctx) { ctx.fillStyle = "#ADD8E6"; ctx.fillRect(0, 0, W-1, H-1); ctx.fillStyle = "#FFFFFF"; angle += 0.0039; for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.x += Math.floor(Math.sin(angle)*5.0); p.y += 0.6*p.r; if (p.x > W) { p.x-=W; } if (p.x < 0) { p.x += W; } if(p.y>(H+1)){ p.y = 0; } if (HAS_PATH) { ctx.save(); ctx.translate(p.x, p.y); ctx.fill(p.path); ctx.restore(); } else { ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, p.r, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); } }; ticks++; if (IS_SKV8) { inval(); } } function fps() { console.log(ticks); ticks = 0; setTimeout(fps, 1000); } setTimeout(fps, 1000); return draw; }(); if (!IS_SKV8) { window.onload = function(){ var canvas = document.getElementById("snow"); var ctx = canvas.getContext("2d"); function drawCallback() { onDraw(ctx); setTimeout(drawCallback, 1); } setTimeout(drawCallback, 1); } } console.log("HAS_PATH: " + HAS_PATH);