<!DOCTYPE html>
<html>
<head>
<title>round.html</title>
<style type="text/css">
#canvas {
background:#dddddd;
}
</style>
<script type="text/javascript">
var canvas=null;
var ctx=null;
//參數(shù)
var r=10;//小圓半徑
var number=6;//圓形層數(shù)
var number2=9;//最里層的小圓的數(shù)量
var direction=0;//旋轉(zhuǎn)方向
var startAngle=0;
function init() {
canvas=document.getElementById("canvas");
ctx=canvas.getContext("2d");
//起始角度
setInterval(function(){
changeAngle();
},500);
}
function changeAngle(){
ctx.clearRect(0,0,400,400);
startAngle==360?startAngle=0:startAngle++;
draw(startAngle);
}
function draw(Angle) {
for(var i=1;i<=number;i++) {
var RGB = Math.floor(Math.random()*255);
//遍歷圓個數(shù)
for(var j=1;j<=number2*i;j++) {
var dx = canvas.width/2;//大圓圓心x坐標
var dy = canvas.height/2;//大圓圓心y坐標
//j*dig 所有圓跨的角度
var dig = (Angle*2*Math.PI/360)+j*2*Math.PI/(number2*i);
var R=(2*r+1)/2/(Math.sin(2*Math.PI/number2/2/i))
var x=dx+Math.sin(Angle+dig)*R;
var y=dy+Math.cos(Angle+dig)*R;
ctx.beginPath();
ctx.fillStyle ="rgb("+RGB+","+Math.floor(RGB/2)+","+(255-RGB)+")";
ctx.arc(x,y,r,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
}
}
}
</script>
</head>
<body align="center" onload="init()">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
利用canvas簡單制作一個轉(zhuǎn)動的圓
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
推薦閱讀更多精彩內(nèi)容
- 前面的章節(jié)中，我們已經(jīng)學習過面向?qū)ο蟮幕静僮鳌⒚嫦驅(qū)ο蟮娜筇卣鞯脑敿毑僮鳎瑢τ诿嫦驅(qū)ο笥辛艘粋€初步的了解和認知...
