用html5画动态太极图
- 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);
十载的潢川网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整潢川建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“潢川网站设计”,“潢川网站推广”以来,每个客户项目都认真落实执行。
- 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);
出自:http://www.cnblogs.com/iamzhanglei/archive/2012/03/27/2419268.html
新闻标题:用html5画动态太极图
文章出自:http://myzitong.com/article/jpdhed.html