Html5学习--------canvas编写简单钟表
<!doctype><html><head><meta charset="utf-8" /><style>body{background-color:Blue;}#showCanvas{background-color:white;}</style><script type="text/javascript" > window.onload = function () { var canvasElt = document.getElementById("showCanvas"); function clockdrow() { if (canvasElt && canvasElt.getContext) { var canvasContext = canvasElt.getContext("2d"); //定义圆心和半径 var x = 200; var y = 200; var r = 150; //获取时间 var oDate = new Date(); var oHour = oDate.getHours(); var oMinute = oDate.getMinutes(); var oSecond = oDate.getSeconds();//画表盘上的分钟刻度 canvasContext.clearRect(0, 0, canvasContext.width, canvasContext.height) canvasContext.beginPath(); for (var i = 0; i < 60; i++) { canvasContext.moveTo(x, y); canvasContext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false); } canvasContext.closePath(); canvasContext.stroke(); canvasContext.beginPath(); canvasContext.fillStyle = "white"; for (var i = 0; i < 60; i++) { canvasContext.moveTo(x, y); canvasContext.arc(x, y, r * 19 / 20, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false); } canvasContext.closePath(); canvasContext.fill(); //画时针刻度 canvasContext.beginPath(); canvasContext.lineWidth = 3; for (var i = 0; i < 12; i++) { canvasContext.moveTo(x, y); canvasContext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false); } canvasContext.closePath(); canvasContext.stroke(); canvasContext.beginPath(); canvasContext.fillStyle = "white"; for (var i = 0; i < 60; i++) { canvasContext.moveTo(x, y); canvasContext.arc(x, y, r * 18 / 20, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false); } canvasContext.closePath(); canvasContext.fill(); //时针所在位置 canvasContext.beginPath(); canvasContext.lineWidth = 4; canvasContext.moveTo(x, y); canvasContext.arc(x, y, r * 10 / 20, (-90 + oHour * 30 + oMinute / 2) * Math.PI / 180, (-90 + oHour * 30 + oMinute / 2) * Math.PI / 180, false); canvasContext.closePath(); canvasContext.stroke(); //分针所在位置 canvasContext.beginPath(); canvasContext.lineWidth = 2; canvasContext.moveTo(x, y); canvasContext.arc(x, y, r * 14 / 20, (-90 + oMinute * 6) * Math.PI / 180, (-90 + oMinute * 6) * Math.PI / 180, false); canvasContext.closePath(); canvasContext.stroke(); //秒针所在位置 canvasContext.beginPath(); canvasContext.moveTo(x, y); canvasContext.arc(x, y, r * 17 / 20, (-90 + oSecond * 6) * Math.PI / 180, (-90 + oSecond * 6) * Math.PI / 180, false); canvasContext.closePath(); canvasContext.stroke(); } else { alert("您的浏览器器不支持canvas，请升级浏览器！"); } }//让表动起来 setInterval(clockdrow, 1000) clockdrow(); }</script></head><body><canvas id="showCanvas" width="400px" height="400px" style="border:1px dotted"></canvas></body></html>