<!DOCTYPE html> <head> <title>Test for H5Draw</title> <style> #cvs{ border:solid 1px #999; background-color:#000 } </style> <script src="http://cloud.github.com/downloads/scottkiss/H5Draw/H5Draw.js"></script> <script> window.onload = function(){ var angle = [20,50,80,115,150,190,235]; var alpha = [0.4,0.5,0.6,0.7,0.8,0.9,1]; var size = [2,2.5,3,3.5,4,4.5,4.6]; var h5dctx = H5D.D2('cvs'); setInterval(function(){ h5dctx.clear(); for(var i = 0;i < 7;i++){ if(angle[i]==360){angle[i]=0;} var x = 14*Math.cos((angle[i])*Math.PI/180)+240; var y = 14*Math.sin((angle[i])*Math.PI/180)+80; h5dctx.drawCircle(x,y,size[i]).fill( { color:"rgba(156,236,255,"+alpha[i]+")", shadow:{ //blur:2,color:"#ddd" }}); angle[i]+=8; } h5dctx.drawText({ message:"Loading...", xPos:220, yPos:125, type:"fill", color:"rgba(255,255,255,1)", }); },33); } </script> </head> <body> <canvas id="cvs" width="500" height="500"> sorry ,your browser dosen't support html5 </canvas> </body> </html>