使用html5画图的小例子-沈阳软件开发_沈阳软件公司

使用html5画图的小例子

浏览量：3438

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<title>html5的页面</title>

</head>

<body>

<canvas id="myCanvas" width="847" height="440" style="background-color:#000000"></canvas>

</body>
<script type="text/javascript">

var c=document.getElementById("myCanvas");//获得画布
var ctx=c.getContext("2d");
var r=10;//半径
var balls=[];//定义一个空数组
function initBall(){
var parentBall={ //母球
  position:{x:200,y:200}, //位置
  r:r, //半径
  color:randomColor() //产生随机色
};
var firstBall={ //首球
  position:{x:550,y:200}, //位置
  r:r, //半径
  color:randomColor() //产生随机色
};
for(var j=1;j<5;j++){ //循环横向
  for(var k=0;k<j+1;k++){//循环纵向
   var ball={
    position:{x:firstBall.position.x+j*Math.sqrt(3)*r,y:firstBall.position.y-j*r+2*k*r}, //位置
    r:r, //半径
    color:randomColor() //产生随机色
   };
   balls.push(ball); //把每个球放入数组
  }
}
balls.push(firstBall);   //把首球放入数组
balls.push(parentBall); //把母球放入数组
}
function draw(){ //向画布上画球

for(i in balls){ //根据数组循环画每个求
  ctx.fillStyle=balls[i].color;
  ctx.beginPath();
  ctx.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
  ctx.closePath();
  ctx.fill();
}
}
initBall(); //生产球
draw(); //画球
function randomColor(){
var arrHex=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
var strHex="#";
var index;
for(var i=0;i<6;i++){
  index=Math.round(Math.random()*15);
  strHex+=arrHex[index];
}
return strHex;

}

function myrefresh(){
window.location.reload();

}
setTimeout('myrefresh()',100); //指定0.1秒刷新一次

</script>

</html>
做软件,crm找沈阳易势科技。

上一篇：SQL查看数据库各表所占空间大小

下一篇：sql--xml

Latest technology最新技术

使用html5画图的小例子

products产品

dynamic网站动态