本文主要是介绍使用canvas做一个八卦图（动态的），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
用canvas做一个太极的效果
先说一下思路 画一个大圆，然后在分割成两个半圆（是太极的那种半圆，不是直接分两个半圆），然后在再两个半圆中画两小圆。大概思路就是这样的。
先给你们放个图看一下（颜色你可以随便调）
下来给你上代码
<script type="text/javascript">// 获取canvas元素var canvas = document.querySelector("#myCanvas");// var canvases = document.querySelectorAll("#myCanvas");// var ctx = canvas.getContext("2d");var ctx = canvas.getContext("2d")ctx.translate(250, 250)setInterval(function() {//黑色半圆ctx.rotate(Math.PI / 180)ctx.beginPath()ctx.arc(0, 0, 250, 0, Math.PI, false)ctx.closePath()ctx.fill()//红色半圆ctx.beginPath();ctx.arc(0, 0, 250, 0, Math.PI, true);ctx.closePath();ctx.fillStyle = "red"ctx.fill()//四分之一处黑色整圆ctx.beginPath()ctx.arc(-125, 0, 125, 0, Math.PI * 2, true)ctx.closePath()ctx.fillStyle = "black"ctx.fill()// 四分之三处红色整圆ctx.beginPath()ctx.arc(125, 0, 125, 0, Math.PI * 2, false)ctx.closePath()ctx.fillStyle = "red"ctx.fill()//在绘制整圆ctx.beginPath()ctx.arc(-125, 0, 20, 0, Math.PI * 2, true)ctx.closePath()ctx.fillStyle = "red"ctx.fill()//在绘制整圆ctx.beginPath()ctx.arc(125, 0, 20, 0, Math.PI * 2, false)ctx.closePath()ctx.fillStyle = "black"ctx.fill()}, 100)</script>
这篇关于使用canvas做一个八卦图（动态的）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
