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

Html5 Canvas 绘制时钟

2017-02-06 17:48 501 查看

原文 http://www.cnblogs.com/angelatian/p/6113051.html
结合博主文章做了相关优化，减少部分重复代码；

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title> html5 Canvas 绘制时钟 </title>
<meta name="Author" content="cloud">
<meta name="Keywords" content="html5 Canvas 绘制时钟">
<meta name="Description" content="html5 Canvas 绘制时钟">
<title>Document</title>

<style type = "text/css">
#c1{
display:block;
margin: 50px auto;
}
</style>
</head>
<body>

<!-- 时钟 Canvas S -->
<canvas id="c1"  width="800px" height="800px">
<span>不支持canvas浏览器</span>
</canvas>
<!-- 时钟 Canvas E -->
</body>
<!-- canvas 时钟脚本 S -->
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

function toDraw(){
var a = 400;
var b = 400;
var r = 200;
oGC.clearRect(0, 0, oC.width, oC.height);

//获取时间
var oDate = new Date();
var oHour = oDate.getHours();
var oMin = oDate.getMinutes();
var oSec = oDate.getSeconds();
var PI = Math.PI / 180;
var oHourvalue = (-90 + oHour * 30 + oMin / 2 ) * PI;
var oMinvalue = (-90 + oMin * 6 ) * PI;
var oSecvalue = (-90 + oSec * 6 ) * PI;
//绘制秒的刻度
DRAW_SECONDS_SCALE(oGC, a, b, r, PI);
//绘制分的刻度
DRAW_MINUTES_SCALE(oGC, a, b, r, PI);
//绘制时针
oGC.lineWidth = 4;
guiding_principle(oGC, a, b, r * 14.5 / 20, oHourvalue);
//绘制分针
oGC.lineWidth = 2;
guiding_principle(oGC, a, b, r * 16.5 / 20, oMinvalue);
//绘制秒针
oGC.lineWidth = 1.5;
guiding_principle(oGC, a, b, r * 18.5 / 20, oSecvalue);
};
setInterval(toDraw,1000);
};

//绘制秒的刻度
function DRAW_SECONDS_SCALE(oGC, a, b, r, PI){
oGC.beginPath();
for(var i = 0; i < 60; i++){
oGC.moveTo(a, b);
oGC.arc(a, b, r, 6 * i * PI, 6 * (i + 1) * PI,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(a,b);
oGC.arc(a, b, r * 19 / 20, 0, 360 * PI ,false);
oGC.closePath();
oGC.fill();
}

//绘制分的刻度
function DRAW_MINUTES_SCALE(oGC, a, b, r, PI){
oGC.lineWidth = 3;
oGC.beginPath();
for(var i = 0; i < 12; i++){
oGC.moveTo(a, b);
oGC.arc(a, b, r, 30 * i * PI, 30 * ( i+ 1) * PI, false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(a, b);
oGC.arc(a, b, r * 17 / 20, 0, 360 * PI, false);
oGC.closePath();
oGC.fill();
}

// 绘制指针
function guiding_principle(oGC, a, b, r, oSecvalue){
oGC.beginPath();
oGC.moveTo(a,b);
oGC.arc(a, b, r, oSecvalue, oSecvalue, false);
oGC.closePath();
oGC.stroke();
}
</script>
<!-- canvas 时钟脚本 E -->

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web canvas html5

相关文章推荐

新的分享

章节导航

Html5 Canvas 绘制 时钟

Html5 Canvas 绘制时钟