旋转太极html源码,HTML5 太极旋转动画

点击这里可以看动画效果：

http://www.108js.com/article/article3/zip1/30229/Test2.html

效果图：

代码：

your browser does not support the canvas tag

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);

全部代码请下载。

热情奉献：HTML5 Canvas绘图与动画学习59例源码：

http://www.108js.com/example.html

旋转太极html源码,HTML5 太极旋转动画相关推荐

C++实现array left rotation数组左旋转(附完整源码)
C++实现array left rotation数组左旋转算法 C++实现array left rotation数组左旋转算法完整源码(实现,main函数测试) C++实现array left rot ...
短视频系统源码，布局旋转横屏竖屏
短视频系统源码,布局旋转横屏竖屏实现的相关代码横屏竖屏 *注意在setContentView()之前 if(this.getResources().getConfiguration().orie ...
jQuery+css3实现极具创意的罗盘旋转时钟效果源码
效果 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
3d旋转相册代码源码_实现可旋转的Reflection Probe(原创)
需求:公司的端游项目有个超大场景(8x8公里),里面需要各种角度的房子,但unity自带的反射球是长方体模式且不支持旋转.相比ue4 早早就有可旋转的长方体和球体2种模式,unity的2017 2 ...
3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体原生 JS 实现 3D 立方体 ...
buildroot修改QT源码支持屏幕旋转
linuxfb屏幕旋转前言一.源码获取二.修改源码三.将补丁拷贝到指定目录四.编译五.添加环境变量前言事情是这样的,在开发板上使用Qt来做一些界面开发,但是我们是用的屏幕是800*12 ...
html5 mp3播放器源码,HTML5自定义mp3播放器源码
audio对象 src兼容.ogg .wav .mp3 width autoplay loop muted静音播放play() var myAudio = new Audio(); myAudio. ...
HTML卡片式布局源码,html5自适应卡片式设计动态加载整站源码_
html5自适应卡片式设计动态加载整站源码该模板是非常容易存活的,这样的程序很容易吸引访客点击,提升ip流量和pv是非常有利的,随意挂点联盟广告都能养活程序. 本套整站源码采使用现在非常流行的全屏自 ...

旋转太极html源码,HTML5 太极旋转动画

旋转太极html源码,HTML5 太极旋转动画相关推荐

最新文章

热门文章