用html5画动态太极图 |
您所在的位置:网站首页 › html5做个太极图插图片 › 用html5画动态太极图 |
用html5画动态太极图
原创
desuzh 2012-05-11 10:31:31 博主文章分类:游戏 ©著作权 文章标签 html 画 太极图 文章分类 HTML5 移动开发 ©著作权归作者所有:来自51CTO博客作者desuzh的原创作品,请联系作者获取转载授权,否则将追究法律责任 your browser does not support the canvas tag 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);
出自:http://www.cnblogs.com/iamzhanglei/archive/2012/03/27/2419268.html 赞 收藏 评论 分享 举报 上一篇:SSH整合项目中容易出现的错误整理 下一篇:打war包命令 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |