编写程序绘制太极图,

　　看到了很多人写的太极图案，自己也来搞一下，今天就来介绍一下

　　钢性铸铁样式代码。动画{宽度：800像素高度：800像素边框：1px纯色# 000;}#canvas{ animation:旋转6s线性无限；}/* 给太极图设置旋转动画*/@关键帧旋转{ 0% {转换：无；} 100%{变换：旋转(360度);}}javascript代码

　　//文档加载完毕后执行函数window.onload=function(){ //获取画布对象var canvas=文档。getelementbyid(“canvas”)；//获取上下文对象var context=画布。获取上下文(“2d”)；//圆开始路径语境。begin path()；//绘制最外层的大圆（黑色)context.arc(400，400，300，数学。圆周率/180 * 0,数学./180 * 360)；//将大圆填充为黑色context.fillStyle= # 000context。fill()；//绘制左半圆（白色)语境。begin path()；context.arc(400，400，300数学。圆周率/180 * 90,数学. PI/180 * 270)；context.fillStyle= # fffcontext。fill()；//绘制右半圆（黑色),会覆盖外层大圆，颜色一样。所以写不写都可以/* context.beginPath()。context.arc(400，400，300数学。圆周率/180 * 270,数学./180 * 90)；context.fillStyle= # 000context。fill()；*///绘制左上半圆（黑色)语境。begin path()；上下文. arc(400，250，150，数学。圆周率/180 * 90,数学. PI/180 * 270)；context.fillStyle= # 000context。fill()；//绘制右下半圆（白色)语境。begin path()；上下文. arc(400，550，150，数学。圆周率/180 * 270,数学./180 * 90)；context.fillStyle= # fffcontext。fill()；//绘制左上小半圆（白色)语境。begin path()；上下文. arc(400，250，35，数学。圆周率/180 * 0,数学./180 * 360)；context.fillStyle= # fffcontext。fill()；//绘制右下小半圆（黑色)语境。begin path()；上下文. arc(400，550，35，数学。圆周率/180 * 0,数学./180 * 360)；context.fillStyle= # 000context。fill()；}html代码

　　div class= animation canvas id= canvas width= 800 height= 800 /canvas/div设置动画之后的太极图效果

　　到此这篇关于帆布绘制太极图的实现示例的文章就介绍到这了，更多相关帆布太极图内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。