<!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;
//参数
var r=10;//小圆半径
var number=6;//圆形层数
var number2=9;//最里层的小圆的数量
var direction=0;//旋转方向
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);
//遍历圆个数
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简单制作一个转动的圆
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
