使用html5畫圖的小例子
瀏覽量：3700
<!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;
<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();
window.location.reload();
}
setTimeout('myrefresh()',100); //指定0.1秒刷新一次
</script>
</html>
做軟件,crm找沈陽易勢科技。
</html>
做軟件,crm找沈陽易勢科技。
上一篇：SQL查看數據庫各表所占空間大小
下一篇：sql--xml