我的专栏

苦-才是人生 ,累-才是工作, 变-才是命运 ,忍-才是历练, 容-才是智慧 ,静-才是修养, 舍-才是得到 ,做-才是拥有!...

HTML5实现旋转的太极

<!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>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013756604/article/details/51489156
个人分类: HTML5
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭