不多说,直接上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta charset="utf-8"/>
<title>Canvas绘制旋转太极</title>
<style type="text/css">
@-webkit-keyframes circleAnimate{
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(-359deg);}}
@keyframes circleAnimate{
from{transform: rotate(0deg);}
to{transform: rotate(-359deg);}}
.circle-animate{
/*-webkit-transform-origin: 50% 50%;*/
/*transform-origin: 50% 50%;*/
-webkit-animation: circleAnimate 2s infinite linear;
animation: circleAnimate 2s infinite linear;
}
</style>
</head>
<body style="width: 500px;height: 500px;background-color: #cccccc;">
<canvas id="face" width="200" height="200" class="circle-animate"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById("face");
var cxt = canvas.getContext('2d');
var r = 100; //半径
var pointX = 0; //圆心x坐标
var pointY = 0; //圆心y坐标
// 绘制扇形填充
function pie(g, radius, startAngle, endAngle, color, x, y) {
g.fillStyle = color;
g.beginPath();
g.arc(x, y, radius, startAngle, endAngle, true);
g.closePath();
g.fill();
}
var q = 0;
function redrawTaiji() {
// 保存状态
cxt.save();
// 清理图像
cxt.clearRect(0, 0, canvas.width, canvas.height);
cxt.translate(100, 100);
q += Math.PI / 6;
cxt.rotate(q);
cxt.beginPath();
// 绘制两个最大圆
pie(cxt, r, 3 / 4 * Math.PI * 2, 5 / 4 * Math.PI * 2, "rgb(0,0,0)", pointX, pointY);
pie(cxt, r, 1 / 4 * Math.PI * 2, 3 / 4 * Math.PI * 2, "rgb(255,255,255)", pointX, pointY);
// 绘制两个中圆
pie(cxt, r / 2, 0, Math.PI * 2, "rgb(0,0,0)", pointX, pointY + r / 2);
pie(cxt, r / 2, 0, Math.PI * 2, "rgb(255,255,255)", pointX, pointY - r / 2);
// 绘制两个最小圆
pie(cxt, r / 4, 0, Math.PI * 2, "rgb(0,0,0)", pointX, pointY - r / 2);
pie(cxt, r / 4, 0, Math.PI * 2, "rgb(255,255,255)", pointX, pointY + r / 2);
cxt.closePath();
}
function initTaiji() {
redrawTaiji();
}
initTaiji();
</script>