本文介绍如何使用JavaScript与HTML5 Canvas技术实现一个动态时钟效果。通过获取系统时间并计算时针、分针和秒针的角度，利用Canvas绘图API在网页上实时渲染时钟指针，展示前端图形绘制的基本应用。
JavaScript结合HTML5 Canvas绘制实时时钟
本文演示如何利用JavaScript与Canvas技术实现一个基础的动态时钟效果，供读者参考学习。
时钟效果展示
最终运行效果如下图所示：
HTML结构代码
首先查看HTML部分的代码结构：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/demo3.js" ></script>
</head>
<body>
<canvas id = "canvas"></canvas>
</body>
</html>JavaScript核心逻辑
接下来是核心的JavaScript实现代码：
var canvas,context;
function draw(){//定义划时钟的方法
var data = new Date();
var hHoure = data.getHours();
var mMin = data.getMinutes();
var sSec = data.getSeconds();
var hValue = (hHoure*30+mMin/2-90)*Math.PI/180;
var mValue = (mMin*6-90)*Math.PI/180;
var sValue = (sSec*6 -90)*Math.PI/180;
var x = 200,y = 200,r = 150;
context.clearRect(0,0,canvas.width,canvas.height);
context.moveTo(x,y);
context.arc(x,y,r,0,6*Math.PI/180,false);
//
context.beginPath();
context.lineWidth = 1;
for(var i = 0;i<60;i++){
context.moveTo(x,y);
context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
context.closePath();
context.stroke();
//
context.beginPath();
context.fillStyle = "white";
context.moveTo(x,y);
context.arc(x,y,r/1.1,-0,2*Math.PI,false);
context.closePath();
context.fill();
//
context.beginPath();
context.lineWidth = 3;
for(var i = 0;i<12;i++){
context.moveTo(x,y);
context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false);
}
context.closePath();
context.stroke();
//
context.beginPath();
context.fillStyle = "white";
context.moveTo(x,y);
context.arc(x,y,r/1.12,0,2*Math.PI,false);
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = "black";
context.moveTo(x,y);
context.arc(x,y,r/30,0,2*Math.PI,false);
context.fill();
//
context.beginPath();
context.lineWidth = 5;
context.moveTo(x,y);
context.arc(x,y,r/2.5,hValue,hValue,false);
context.stroke();
//
context.beginPath();
context.lineWidth = 3;
context.moveTo(x,y);
context.arc(x,y,r/2,mValue,mValue,false);
context.stroke();
//
context.beginPath();
context.lineWidth = 2;
context.moveTo(x,y);
context.arc(x,y,r/1.6,sValue,sValue,false);
context.stroke();
}
window.onload = function(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.height = 500;
canvas.width = 500;
setInterval(draw,1000);
draw();
}如需查看更多JavaScript时钟特效，请访问JavaScript时钟特效专题。
以上就是本文的全部内容，希望能为各位的学习带来帮助，同时也欢迎大家继续支持本站。