本文介绍如何使用HTML5 Canvas制作一个简易时钟。核心在于利用三角函数（Math.sin/cos）处理角度与弧度的转换，并通过坐标偏移修正起始位置。代码包含基本的线条绘制、颜色填充及音频播放功能，旨在展示Canvas绘图基础与数学计算的结合。
Canvas时钟实现概述
今天分享一个风格独特的时钟效果，尽管外观可能并不精致。
在开发过程中，是否有一种便捷的Canvas调试工具？目前只能依赖浏览器刷新来查看效果，这个过程确实令人疲惫。
以下是具体实现代码：
核心代码与三角函数应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #eee;
}
canvas{
background: #fff;
}
</style>
</head>
<body>
<canvas width="800" height="800">你浏览器不支持，请升级...</canvas>
<audio id="audio" src="1.wav"></audio>
<script>
var oAudio=document.getElementById("audio");
var oCas=document.getElementsByTagName("canvas")[0];
var cas=oCas.getContext("2d");
oAudio.ontimeupdate=function(){
if(oAudio.currentTime>0.1){
this.pause();
}
}
/*渐变颜色*/
var color=cas.createRadialGradient(400,400,10,400,400,200);
color.addColorStop(0,"#f1f4f5");
color.addColorStop(1,"#c5c6c7");
setInterval(function(){
oAudio.currentTime=0;
oAudio.play();
cas.clearRect(0,0,800,800);
/*画圆框*/
cas.lineWidth=3;
cas.shadowColor="#888";
cas.shadowOffsetX=1;
cas.shadowOddsetY=1;
cas.shadowBlur=5;
cas.arc(400,400,200,0,Math.PI*2,false);
cas.strokeStyle=color;
cas.stroke();
/*画圆内*/
cas.fillStyle=color;
cas.fill();
/*画时刻*/
drawTime();
function drawTime(){
var len=8;
var len1=16;
cas.strokeStyle="#7f7f7f";
cas.shadowOffsetX=0;
cas.shadowOddsetY=0;
cas.shadowBlur=0;
cas.beginPath();
for(var i=0;i<60;i++){
if(i%5==0){
cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);
cas.lineTo(400+(200-len1)*Math.cos(i*6*Math.PI/180),400+(200-len1)*Math.sin(i*6*Math.PI/180));
}else{
cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);
cas.lineTo(400+(200-len)*Math.cos(i*6*Math.PI/180),400+(200-len)*Math.sin(i*6*Math.PI/180));
}
}
cas.stroke();
}
/*画时针*/
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
/*时针*/
needle(h*5+5*m/60,100,"#579ec5");
/*分针*/
needle(m,130,"#5e717c");
/*秒针*/
needle(s,150,"#1d1e1e");
/*圆的中心点*/
cas.fillStyle="#858384";
cas.beginPath();
cas.arc(400,400,5,0,2*Math.PI,true);
cas.shadowOffsetX=1;
cas.shadowOddsetY=1;
cas.shadowBlur=5;
cas.fill();
},1000);
/*时针的函数*/
function needle(t,len,color){
var angle=Math.PI/180;
cas.beginPath();
cas.strokeStyle=color;
cas.moveTo(400,400);
cas.lineTo(400+len*Math.cos((t*6-90)*angle),400+len*Math.sin((t*6-90)*angle));
cas.stroke();
}
</script>
</body>
</html>
角度与弧度的转换逻辑
这个时钟的实现重点不在于绘图本身，而在于对三角函数的应用。三角函数的使用与角度密切相关，Math.PI代表π值，而Math.sin()和Math.cos()函数接收的参数均为弧度制，因此必须进行相应的处理。
需要将角度转换为弧度。在绘制时钟之前，需先确定时钟的初始条件。将圆分为60等份，每一份代表一个刻度。此外，Canvas坐标系以数学正方向为准，因此需要进行坐标调整。
需要对起始坐标进行偏移处理，减去90度即可使时钟的起始位置与标准时钟一致。
绘图原理与坐标处理
在学习Canvas之前，建议复习相关的数学函数知识。这并非复杂的算术运算，而是通过不断确认坐标点并连接成线来完成绘制。
最终形成的图形，其原理与数学中从点到线、从线到面的构建过程相似。
上述代码并不复杂，主要利用线条绘制功能，重复调用画线函数并填充颜色。此外，代码中还包含一个音频标签的使用，用于实现时钟的“滴答”音效。
以上为本文的全部内容，希望能为读者提供有益的帮助，同时也欢迎大家继续支持本站。