用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>