您的位置：首页 > Web前端 > HTML5

Html5学习--------canvas编写简单钟表

2012-10-27 01:13 417 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航