使用html5畫圖的小例子
瀏覽量：3688
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>html5的頁(yè)面</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=[];//定義一個(gè)空數(shù)組
function initBall(){
var parentBall={ //母球
position:{x:200,y:200}, //位置
r:r, //半徑
color:randomColor() //產(chǎn)生隨機(jī)色
};
var firstBall={ //首球
position:{x:550,y:200}, //位置
r:r, //半徑
color:randomColor() //產(chǎn)生隨機(jī)色
};
for(var j=1;j<5;j++){ //循環(huán)橫向
for(var k=0;k<j+1;k++){//循環(huán)縱向
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() //產(chǎn)生隨機(jī)色
};
balls.push(ball); //把每個(gè)球放入數(shù)組
}
}
balls.push(firstBall); //把首球放入數(shù)組
balls.push(parentBall); //把母球放入數(shù)組
}
function draw(){ //向畫布上畫球
for(i in balls){ //根據(jù)數(shù)組循環(huán)畫每個(gè)求
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(); //生產(chǎn)球
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=[];//定義一個(gè)空數(shù)組
function initBall(){
var parentBall={ //母球
position:{x:200,y:200}, //位置
r:r, //半徑
color:randomColor() //產(chǎn)生隨機(jī)色
};
var firstBall={ //首球
position:{x:550,y:200}, //位置
r:r, //半徑
color:randomColor() //產(chǎn)生隨機(jī)色
};
for(var j=1;j<5;j++){ //循環(huán)橫向
for(var k=0;k<j+1;k++){//循環(huán)縱向
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() //產(chǎn)生隨機(jī)色
};
balls.push(ball); //把每個(gè)球放入數(shù)組
}
}
balls.push(firstBall); //把首球放入數(shù)組
balls.push(parentBall); //把母球放入數(shù)組
}
function draw(){ //向畫布上畫球
for(i in balls){ //根據(jù)數(shù)組循環(huán)畫每個(gè)求
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(); //生產(chǎn)球
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找沈陽(yáng)易勢(shì)科技。
</html>
做軟件,crm找沈陽(yáng)易勢(shì)科技。