点击这里可以看动画效果：
http://www.108js.com/article/article3/zip1/30229/Test2.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;
function taiji(ctx,x, y, radius, angle, clrA,clrB,wise) {
angle = angle || 0;
wise=wise||1;
ctx.save();
ctx.translate(x, y);
ctx.rotate(wise*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(-0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrA;
ctx.arc(0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);
ctx.arc(-0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = clrB;
ctx.arc(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(ctx,200, 200, 50,Math.PI * (angle / 360) * 2, "#000","#f00",1);
taiji(ctx,320, 200, 50,Math.PI * (angle / 360) * 2, "#000","#f00",-1);
angle = (angle + 5) % 360;
}, 50);
</script>
</body>
</html>
全部代码请下载。
热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html
- 大小: 3.3 KB
分享到：
相关推荐
H5新特性的CSS动画，更多的是使用CSS选择器来完成，尽可能的不加入JS代码来实现动画效果，该案例为2D动画，模仿太极的旋转，仅供娱乐。
在这个例子中，我们将详细探讨如何利用HTML5 Canvas实现旋转动画，特别是创建一个旋转的太极图效果。 首先，我们要了解Canvas的基本用法。在HTML中，我们创建一个`<canvas>`元素，指定其宽度和高度，然后通过...
基于html5和css3的动画、阴影和伪类等，实现不断旋转的太极图动画效果，响应式设计区分PC端和移动端的浏览效果，
【CSS3太极周易风水罗盘动画代码】 在网页设计中，CSS3（层叠样式表第三版）的出现极大地丰富了网页的视觉效果和动态表现。本资源提供了一个使用CSS3实现的太极周易风水罗盘动画代码，旨在帮助开发者创建具有中国...
在本资源中，我们拥有一个使用纯CSS3技术实现的3D阴阳八卦（太极）图旋转动画效果的源代码。这个项目展示了CSS3的强大功能，尤其是其在创建动态图形和动画方面的潜力。以下是对这个技术实现的详细解析： 1. **CSS3 ...
例如，它可能用来控制太极图案的动画效果，如太极图的旋转、阴阳鱼的动态变换等。JavaScript还可以检测用户的鼠标或触摸事件，实现与太极图形的互动。 2. HTML5：HTML5是超文本标记语言的最新版本，用于构建和呈现...
在实际操作中，开发者可能首先用HTML定义太极图案的基本结构，然后用CSS3设置其样式和旋转动画。JavaScript（可能是jQuery）部分则用于响应用户交互，比如点击按钮启动旋转。这不仅展示了HTML、CSS3和JavaScript的...
通过html5与css配合，做了一个简单的太极图，再做个动画旋转。给太极图做个背景，再做一个背景放大缩小的动画效果。最后实现一个旋转和放大缩小的太极图，都是html5和css最基础的应用实践。-逆战班
综上所述，"Google首页logo太极动画效果.zip"项目展示了前端开发中如何结合HTML5、CSS3、JavaScript和jQuery来创建动态且引人入胜的用户体验。通过熟练运用这些技术，开发者能够创造出各种富有创意的网页元素，提升...
首先，我们需要理解太极旋转的基本构造。太极图通常由黑白两色的两个相互嵌套的圆组成，中间由一条S形曲线分隔，形成四个相对的半圆。在JS实现中，我们可以将太极图案视为一个基准转盘，所有其他元素都将基于这个...
这是一款很有趣的纯CSS3小动画，它是我们中国人都非常熟悉的阴阳太极图案，整个图案是利用纯CSS3绘制而成，而且更酷的是，这个太极图案还会不断旋转，看上去非常的...而且这个旋转动画特效也是利用CSS3的动画属性实现。
在这个项目中，开发者巧妙地运用了CSS3的属性来构建出具有视觉吸引力的太极图，并赋予其旋转动画，以展示其动态效果。 首先，让我们了解CSS3中用于创建太极图的关键特性： 1. **边框半径（border-radius）**：太极...
通过CSS实现元素的定位和旋转动画，利用Canvas的绘图方法绘制复杂的形状，最终形成具有视觉吸引力的旋转太极图。这对于学习HTML5的Canvas特性和理解动态Web图形的实现方式具有很高的参考价值。此外，了解并掌握这些...
在SVG中，可以利用`<circle>`、`<path>`等元素绘制太极图的黑白双鱼图案，并通过CSS3的`transform`属性来实现旋转动画。 在压缩包中，"H5制作简单视频插件与太极图特效"可能包含以下文件： 1. HTML文件：包含了`...
在本教程中，我们将深入探讨如何使用原生JavaScript（JS）来实现Google首页上标志性的太极动画效果。这个效果展示了两个互相旋转的圆形，形成一个动态的、和谐的画面，象征着平衡与和谐，与Google的品牌理念相吻合。...
这个“CSS3风水罗盘旋转动画特效”是一个利用CSS3特性和技术实现的创新视觉效果，它模拟了中国传统风水学中的乾坤八卦罗盘，通过动态旋转来吸引用户注意力并提升用户体验。 首先，我们要理解CSS3的关键帧动画（@...
在这个项目中，开发者可能结合了HTML5的`canvas`、CSS3的动画特性和可能的UCAX框架或IOL技术，创造出了既有视觉冲击力又具有互动性的太极旋转效果。这样的技术组合展示了HTML5和相关工具的强大能力，以及在现代网页...