<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate(250, 250);
// ctx.rotate(Math.PI/4);
function drawArc(deg) {
ctx.beginPath();
//旋转
ctx.rotate(deg);
//1. 轮廓
ctx.arc(0, 0, 200, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(0, 0, 200, Math.PI / 2, Math.PI * 3 / 2, false);
ctx.closePath();
ctx.fill();
//两个小圆
ctx.beginPath();
ctx.arc(0, -100, 100, 0, Math.PI * 2, true);
ctx.fillStyle = "white";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(0, 100, 100, 0, Math.PI * 2, true);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(0, -100, 20, 0, Math.PI * 2, true);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(0, 100, 20, 0, Math.PI * 2, true);
ctx.fillStyle = "white";
ctx.fill();
ctx.closePath();
}
var deg = 0;
// setInterval(function () {
// deg = Math.PI/6;
// ctx.clearRect(-250,-250,500,500);
//
// drawArc(deg);
// },100);
// function move () {
// deg = Math.PI/6;
// ctx.clearRect(-250,-250,500,500);
// drawArc(deg);
// setTimeout(move,100);
// }
// move();
// 调整转速
var i = 0;
function move () {
i++;
if (i % 7 == 0) {
deg = Math.PI/6;
ctx.clearRect(-250,-250,500,500);
drawArc(deg);
}
//当浏览器渲染刷新的时候调用
window.requestAnimationFrame(move);
}
move();
// function move() {
// // i++;
// // if (i % 7 == 0) {
// // }
// deg = Math.PI / 6;
// ctx.clearRect(-250, -250, 500, 500);
// drawArc(deg);
// //当浏览器渲染刷新的时候调用
// window.requestAnimationFrame(move);
// }
// move();
</script>
</body>
</html>