- <!DOCTYPE HTML>
- <html>
- <body>
- <canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
- <script type="text/javascript">
- var deg = 0;
- var r = 30;
- var rl = 100;
- function drawTaiji() {
- var canvas = document.getElementById('myCanvas');
- var context = canvas.getContext('2d');
- var colorA = "rgb(0, 0, 0)";
- var colorB = "red";
- var px =Math.sin(deg)*r;
- var py =Math.cos(deg)*r;
- context.clearRect(0, 0, 300, 300);
- context.beginPath();
- context.fillStyle = colorA;
- context.arc(rl, rl, 60, 0.5 * Math.PI +deg, 1.5 * Math.PI +deg, true);
- context.closePath();
- context.fill();
- context.fillStyle = colorB;
- context.beginPath();
- context.arc(rl, rl, 60, 1.5* Math.PI +deg, 0.5 * Math.PI +deg, true);
- context.closePath();
- context.fill();
- context.fillStyle = colorB;
- context.beginPath();
- context.arc(rl+px, rl-py, 30, 0.5 * Math.PI + deg, 1.5 * Math.PI + deg, true);
- context.closePath();
- context.fill();
- context.fillStyle = colorA;
- context.beginPath();
- context.arc(rl-px, rl+py, 30, 1.5 * Math.PI + deg, 0.5 * Math.PI + deg, true);
- context.closePath();
- context.fill();
- context.fillStyle = colorA;
- context.beginPath();
- context.arc(rl+px, rl-py, 8, 0, 2 * Math.PI, true);
- context.closePath();
- context.fill();
- context.fillStyle = colorB;
- context.beginPath();
- context.arc(rl-px, rl+py, 8, 0, 2 * Math.PI, true);
- context.closePath();
- context.fill();
- deg +=0.1;
- }
- setInterval(drawTaiji, 100);
- </script>
- </body>
- </html>
- <!DOCTYPE HTML>
- <html>
- <body>
- <canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas>
- <script type="text/javascript">
- var canvas = document.getElementById('myCanvas');
- var ctx = canvas.getContext("2d");
- var angle = 0;
- var count = 360;
- var clrA = '#000';
- var clrB = 'red';
- function taiji(x, y, radius, angle, wise) {
- angleangle = angle || 0;
- wisewise = wise ? 1 : -1;
- ctx.save();
- ctx.translate(x, y);
- ctx.rotate(angle);
- ctx.fillStyle = clrA;
- ctx.beginPath();
- ctx.arc(0, 0, radius, 0, Math.PI, true);
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = clrB;
- ctx.arc(0, 0, radius, 0, Math.PI, false);
- ctx.fill();
- ctx.fillStyle = clrB;
- ctx.beginPath();
- ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = clrA;
- ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);
- ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
- ctx.fill();
- ctx.beginPath();
- ctx.fillStyle = clrB;
- ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
- ctx.fill();
- ctx.restore();
- }
- loop = setInterval(function () {
- beginTag = true;
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- taiji(200, 200, 50, Math.PI * (angle / count) * 2, true);
- //taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);
- angle = (angle + 5) % count;
- }, 50);
- </script>
- </body>
- </html>
出自：http://www.cnblogs.com/iamzhanglei/archive/2012/03/27/2419268.html
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
