canvas八卦圖2
<!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 =
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>