Html5学习-canvas编纂简单钟表
日期：2014-05-17 浏览次数：20723 次
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
