<!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简单制作一个转动的圆
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
