很久没有更新博客了，最近忙实习准备面试，快要心力交瘁-_-。空闲下来后，用HTML5的canvas模拟的简易钟表，贴上代码。
效果如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas模拟钟表</title>
<style>
body { background-color:yellow;}
#c1 { background-color: white;}
</style>
<script>
window.onload = function() {
var oC = document.getElementById(‘c1‘);
var oCG = oC.getContext(‘2d‘);
function toDraw() {
oCG.clearRect(0,0,oC.width,oC.hight); //如果不清空画布每执行一次toDate()就会画一次时钟，导致每秒都有一次时钟重合
var x = 200;
var y = 200;
var r = 150;
var oDate = new Date();
var oHours = oDate.getHours();
var oMin = oDate.getMinutes();
var oSec = oDate.getSeconds();
//分别获取三针在当前时间点的弧度，从12点开始计算，因此需要减去90度（arc函数从三点处开始计算为0度）
// 度数转化为弧公式：度数*Math.PI/180
var oHoursValue = (-90+30*oHours+oMin/2)*Math.PI/180;// oMin/2指分针走一圈60分钟，时针只走15度
var oMinValue = (-90+6*oMin)*Math.PI/180;
var oSecValue = (-90+6*oSec)*Math.PI/180;
//绘制表盘分针刻度
oCG.beginPath();
for(var i=0;i<60;i++) {
oCG.moveTo(x,y);
oCG.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); }
oCG.closePath();
oCG.stroke();
//由于分针刻度是从中心点开始沿半径指向表盘弧，所以绘制一个半径稍小于r，填充背景为白色的表盘遮盖多余的刻度
oCG.fillStyle=‘white‘;
oCG.beginPath();
oCG.moveTo(x,y);
oCG.arc(x,y,r*19/20,0,360*Math.PI/180,false);
oCG.closePath();
oCG.fill();
//绘制时针刻度
oCG.lineWidth=‘3‘;
oCG.beginPath();
for(var i=0;i<12;i++) {
oCG.moveTo(x,y);
oCG.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); }
oCG.closePath();
oCG.stroke();
//同上，绘制填充背景为白色的小盘遮盖多余刻度
oCG.fillStyle=‘white‘;
oCG.beginPath();
oCG.moveTo(x,y);
oCG.arc(x,y,r*18/20,0,360*Math.PI/180,false);
oCG.closePath();
oCG.fill();
//绘制时针指针
oCG.lineWidth = ‘5‘;
oCG.beginPath();
oCG.moveTo(x,y);
oCG.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
oCG.closePath();
oCG.stroke();
//绘制分针指针
oCG.lineWidth = ‘3‘;
oCG.beginPath();
oCG.moveTo(x,y);
oCG.arc(x,y,r*14/20,oMinValue,oMinValue,false);
oCG.closePath();
oCG.stroke();
//绘制秒针指针
oCG.lineWidth = ‘1‘;
oCG.beginPath();
oCG.moveTo(x,y);
oCG.arc(x,y,r*19/20,oSecValue,oSecValue,false);
oCG.closePath();
oCG.stroke();
//绘制时钟中心的黑点
oCG.fillStyle=‘black‘;
oCG.beginPath();
oCG.moveTo(x,y);
oCG.arc(x,y,r*1/30,0,360*Math.PI/180,false);
oCG.closePath();
oCG.fill();
}
setInterval(toDraw,1000);
toDraw();
};
</script>
</head>
<body>
<canvas id="c1" width="400px" height="400px"> <!--宽高写在html里，写在css里有问题-->
<span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
</canvas>
</body>
</html>
时间： 2024-10-25 23:02:17