Canvas实现太极图案并旋转

效果如下：

<!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> </p> <p></body>
</html>

Canvas实现太极图案并旋转相关推荐

HTML5 Canvas组件绘制太极图案
一实现思路: 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆 ...
CSS3 实现太极图案
CSS3实现太极图案分析图片组成(如下图所示): 先给出html代码: <div class="box"><div class="content&qu ...
CSS3使用一个盒子实现太极图案
使用一个盒子实现太极图案代码如下: <body><div></div> </body> * {margin: 0;padding: 0; } body ...
使用Java 2D绘制黑白太极图案
一:基本原理利用Java 2D的Area对象对绘制形状几何操作的支持,完成太极图案的绘制,使用Paint来完成对不同颜色的填充.Java 2D图形API Area对Shape支持四种几何操作: - ...
如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
canvas 变形记——移动、旋转、缩放、变形
canvas 有几个变形形式:移动.旋转.缩放.变形.在做变形之前先保存状态是一个良好的习惯.大多数情况下,调用 restore 方法比手动恢复原先的状态要简单得多.又,如果你是在一个循环中做位移但没 ...
HTML怎么让正方形转动,第十讲：html5中canvas实现正方体的动态旋转
在html5的画布上,画出三维图形,并且实现它动态的围着一条轴进行旋转. 实现步骤: 1.定义一个对象Vector3,用于存储三维的坐标 2.定义一个观察点坐标和显示屏,初始化观察点的显示屏的距离(主 ...
HTML5 Canvas平移，放缩，旋转演示
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API. 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变 ...
使用canvas绘制太极
太极图今天学习canvas,哈哈哈,其实我还搞不清楚方向来者,不过太极倒是画出来了,记录一下,方便日后查询理论:绘制圆形cxt.arc(x,y,r,起点弧度(3点位置),终止弧度,bool(默认是 ...
canvas图形操作(缩放、旋转、位移)
一.缩放 <!doctype html> <html lang="en"> <head><meta charset="UTF-8 ...

Canvas实现太极图案并旋转

Canvas实现太极图案并旋转相关推荐

最新文章

热门文章