<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#canvas2{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas2" width="600px" height="600px"></canvas>
<script type="text/javascript">
var canvas2 = document.getElementById("canvas2");
var ctx = canvas2.getContext("2d");
var r= 200;
var radiu = 30;
var center = 300;
function drawTaiji(){
var d = degree(radiu);
//开始一条路径
ctx.beginPath();
ctx.arc(center-r/2*Math.cos(d),center-r/2*Math.sin(d),r/2,d,d+Math.PI,0);
ctx.arc(center+r/2*Math.cos(d),center+r/2*Math.sin(d),r/2,d,d+Math.PI,1);
ctx.arc(center,center,r,d+Math.PI,d,0);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(center,center,r,d+Math.PI*2,d,1);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(center-r/2*Math.cos(d),center-r/2*Math.sin(d),r/6,d,d+Math.PI*2,0);
ctx.fillStyle = "white";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(center+r/2*Math.cos(d),center+r/2*Math.sin(d),r/6,d,d+Math.PI*2,0);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
}
function degree(x){
return x/180.0*Math.PI;
}
function degreeAdd(){
radiu++;
ctx.clearRect(0,0,600,600);
drawTaiji();
}
setInterval(degreeAdd,0.01);
</script>
</body>
</html>
扫一扫
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
