- 1、本文档共3页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
这篇文章主要介绍了 HTML5 Canvas 旋转动画的 2 个代码例子 ,实现了一个旋转的太极
图效果 ,学习 HTML5 Canvas 旋转动画的朋友可以参考下
效果图:
方法一:
代码如下 :
lt;!DOCTYPE HTMLgt;
lt;htmlgt;
lt;bodygt;
lt;canvas id=myCanvas width=500 height=500gt;your browser does not support the
canvas taglt;/canvasgt;
lt;script type=text/javascriptgt;
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);
lt;/scriptgt; lt;/pgt; lt;pgt;lt;/bodygt;
您可能关注的文档
- dedecms自定义模型提示:CalltoamemberfunctionGetInnerText()的解决方法.pdf
- DEDECMS自定义联动类别调用及修改方法.pdf
- Dedecms自定义表单“数据校验不对,程序返回错误”的解决方法.pdf
- dedecms自定义表单提交后的跳转链接修改方法.pdf
- dedecms防止被挂马必看安全知识.pdf
- dedecms页面如何获取会员状态的实例代码.pdf
- dedecms页面获取会员状态的方法_7.pdf
- Dedecms默认模板用户评论扩展.pdf
- DELL工作站3620win10系统换win7系统解决方案.pdf
- discuz免激活同步登入代码修改方法(discuz同步登录).pdf
- 新的一年工作展望.docx
- 医生年终个人工作的述职报告(3篇).docx
- 2023年消防设施操作员之消防设备中级技能考前冲刺练习题附答案详解.docx
- 2022-2023年环境影响评价工程师之环评技术导则与标准通关练习题包括详细解答.docx
- 2023年中级注册安全工程师之安全生产管理考前冲刺检测卷和答案.docx
- 2023年中级银行从业资格之中级银行管理考前冲刺测试卷提供答案解析.docx
- 2023年公共营养师之二级营养师通关模拟考试试卷附带答案.docx
- 证券分析师之发布证券研究报告业务考前冲刺模拟题库.docx
- 2022-2023年二级建造师之二建建设工程法规及相关知识综合提升测试卷附答案.docx
- 2023年二级建造师之二建机电工程实务通关模拟考试试卷提供答案解析.docx
文档评论(0)