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