前端中如何使用canvas绘制太极图

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

css样式代码：

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

javascript代码：

//文档加载完毕后执行函数 window.onload = function(){   //获取画布对象   var canvas = document.getElementById('canvas');   //获取上下文对象   var context = 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代码：

<div class="animation">     <canvas id="canvas" width="800" height="800"></canvas>   </div>

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