这篇文章主要介绍“前端中如何使用canvas绘制太极图”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“前端中如何使用canvas绘制太极图”文章能帮助大家解决问题。

css样式代码：

.animation{width:800px;height:800px;border:1pxsolid#000;}#canvas{animation:rotate6slinearinfinite;}/*给太极图设置旋转动画*/@keyframesrotate{0%{transform:none;}100%{transform:rotate(360deg);}}

javascript代码：

//文档加载完毕后执行函数window.onload=function(){//获取画布对象varcanvas=document.getElementById('canvas');//获取上下文对象varcontext=canvas.getContext('2d');//圆开始路径context.beginPath();//绘制最外层的大圆(黑色)context.arc(400,400,300,Math.PI/180*0,Math.PI/180*360);//将大圆填充为黑色context.fillStyle='#000';context.fill();//绘制左半圆(白色)context.beginPath();context.arc(400,400,300,Math.PI/180*90,Math.PI/180*270);context.fillStyle='#fff';context.fill();//绘制右半圆(黑色)，会覆盖外层大圆，颜色一样。所以写不写都可以/*context.beginPath();context.arc(400,400,300,Math.PI/180*270,Math.PI/180*90);context.fillStyle='#000';context.fill();*///绘制左上半圆(黑色)context.beginPath();context.arc(400,250,150,Math.PI/180*90,Math.PI/180*270);context.fillStyle='#000';context.fill();//绘制右下半圆(白色)context.beginPath();context.arc(400,550,150,Math.PI/180*270,Math.PI/180*90);context.fillStyle='#fff';context.fill();//绘制左上小半圆(白色)context.beginPath();context.arc(400,250,35,Math.PI/180*0,Math.PI/180*360);context.fillStyle='#fff';context.fill();//绘制右下小半圆(黑色)context.beginPath();context.arc(400,550,35,Math.PI/180*0,Math.PI/180*360);context.fillStyle='#000';context.fill();}

html代码：

<divclass="animation"><canvasid="canvas"width="800"height="800"></canvas></div>

关于“前端中如何使用canvas绘制太极图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。