日期:2014-05-17 浏览次数:20573 次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Wheel</title> </head> <body> <canvas id="canvas" width="200" height="200"></canvas> <script type="text/javascript"> (function () { var canvas = document.getElementById("canvas"), context2D = canvas.getContext("2d"), FPS = 20, HALFWIDTH = canvas.width / 2, HALFHEIGHT = canvas.height / 2, PI = Math.PI, init, draw; init = function () { context2D.translate(HALFWIDTH, HALFHEIGHT); window.setInterval(function () { context2D.clearRect(0, 0, canvas.width, canvas.height); context2D.rotate(5 * PI / 180); draw(); }, 1000 / FPS); }; draw = function () { context2D.beginPath(); context2D.arc(0, 0, 50, 0, 2 * PI); context2D.fillStyle = "yellow"; context2D.fill(); context2D.closePath(); context2D.beginPath(); context2D.moveTo(0, -50); context2D.lineTo(0, 50); context2D.strokeStyle = "red"; context2D.stroke(); context2D.closePath(); context2D.beginPath(); context2D.moveTo(-50, 0); context2D.lineTo(50, 0); context2D.strokeStyle = "red"; context2D.stroke(); context2D.closePath(); }; window.onload = init; })(); </script> </body> </html>