发布：2016/1/14 12:50:09作者：管理员 来源：本站 浏览次数：1748
<!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>
