| |
<!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 oC = document.getElementById("canvas"); |
| |
var ctx = oC.getContext("2d"); |
| |
|
| |
ctx.translate(250,250); |
| |
function autoplay() { |
| |
// 左边 |
| |
ctx.beginPath(); |
| |
ctx.fillStyle = "black"; |
| |
ctx.arc(0, 0, 200, Math.PI * 0.5, Math.PI * 1.5, false); |
| |
ctx.fill(); |
| |
ctx.closePath(); |
| |
|
| |
|
| |
// 右边 |
| |
ctx.beginPath(); |
| |
ctx.fillStyle = "white"; |
| |
ctx.strokeStyle = "black"; |
| |
ctx.arc(0, 0, 200, Math.PI * 1.5, Math.PI * 0.5, false); |
| |
ctx.fill(); |
| |
ctx.stroke(); |
| |
ctx.closePath(); |
| |
// 小大的 |
| |
ctx.beginPath(); |
| |
ctx.fillStyle = "white"; |
| |
ctx.arc(0, -100, 100, Math.PI * 0.5, Math.PI * 1.5, false); |
| |
ctx.fill(); |
| |
ctx.closePath(); |
| |
|
| |
ctx.beginPath(); |
| |
ctx.fillStyle = "black"; |
| |
ctx.arc(0, 100, 100, Math.PI * 1.5, Math.PI * 0.5, false); |
| |
ctx.fill(); |
| |
//小小的 |
| |
ctx.beginPath(); |
| |
ctx.fillStyle = "white"; |
| |
ctx.arc(0, 100, 35, 0, Math.PI * 2, false); |
| |
ctx.fill(); |
| |
ctx.closePath(); |
| |
|
| |
ctx.beginPath(); |
| |
ctx.fillStyle = "black"; |
| |
ctx.arc(0, -100, 35, 0, Math.PI * 2, false); |
| |
ctx.fill(); |
| |
ctx.closePath(); |
| |
} |
| |
|
| |
|
| |
var deg = 0; |
| |
// setInterval(function(){ |
| |
// deg += Math.PI / 6; |
| |
// // 清空 |
| |
// ctx.clearRect(-250,-250,500,500); |
| |
// ctx.rotate(Math.PI / 100); |
| |
// autoplay(); |
| |
// },20) |
| |
|
| |
|
| |
// function move(){ |
| |
// deg = Math.PI / 6; |
| |
// // 清空 |
| |
// ctx.clearRect(-250,-250,500,500); |
| |
// ctx.rotate(Math.PI / 100); |
| |
// autoplay(); |
| |
// setTimeout(move,100); |
| |
// } |
| |
// move(); |
| |
function move(){ |
| |
deg = Math.PI / 6; |
| |
// 清空 |
| |
ctx.clearRect(-250,-250,500,500); |
| |
ctx.rotate(Math.PI / 100); |
| |
autoplay(); |
| |
// 当浏览器渲染刷新的时候调用 |
| |
window.requestAnimationFrame(move); |
| |
} |
| |
move(); |
| |
</script> |
| |
</body> |
| |
|
| |
</html> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
