点击广告查看隐藏内容....
不知大家是否看见有的网站会有一个时钟，今天给大家分享一个自己用canvas绘制的时钟,只要系统的时间正确，该时钟的时间就不会错。废话不多说了，下面就是时钟的整个html代码，只需要将代码复制之后保存为html文件就可以运行了，至于怎么加在自己的网站上就需要你们自己琢磨了。
运行结果如下图所示:
[code lang="js"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="时钟">
<meta name="description" content="">
<title>clock</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body bgcolor="black">
<canvas id="canvas" width="800" height="600">您的浏览器不支持canvas</canvas>
<script type="text/javascript">
(function(){
/**
*站点：执念博客
*作者：执念
*网址：http://zhinianboke.com
*/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = window.innerWidth/2;
var y = window.innerHeight/2;
var r = 80;
var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
drawClock();
move(hours,minutes,seconds);
function drawClock(){ //画时钟
ctx.strokeStyle = "gray";
ctx.lineWidth = "3";
ctx.beginPath();
var sr = 5;
ctx.arc(x,y,r,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(x,y,2,0,2*Math.PI);
ctx.fill();
ctx.font = "13px Arial";
ctx.fillStyle = "gray";
var time = -1;
for(var i=0;i<60;i++){
var q = i*2*Math.PI/60;
var x1 = 0;//刻度终点
var y1 = 0;
var x2 = 0;//刻度起点
var y2 = 0;
var x3 = 0;//刻度值位置
var y3 = 0;
sr = 5;
if(i%5 == 0){
sr = 10;
time++;
}
if(i%15 == 0){
sr = 15;
}
if(q>=0 && q<Math.PI/2){
x1 = x + r*Math.sin(q);
y1 = y - r*Math.cos(q);
x2 = x + (r-sr)*Math.sin(q);
y2 = y - (r-sr)*Math.cos(q);
x3 = x + (r-sr-14)*Math.sin(q);
y3 = y - (r-sr-13)*Math.cos(q);
}
if(q>=Math.PI/2 && q<Math.PI){
x1 = x + r*Math.sin(Math.PI-q);
y1 = y + r*Math.cos(Math.PI-q);
x2 = x + (r-sr)*Math.sin(Math.PI-q);
y2 = y + (r-sr)*Math.cos(Math.PI-q);
x3 = x + (r-sr-12)*Math.sin(Math.PI-q);
y3 = y + (r-sr-5)*Math.cos(Math.PI-q);
}
if(q>=Math.PI && q<3*Math.PI/2){
x1 = x - r*Math.cos(3*Math.PI/2-q);
y1 = y + r*Math.sin(3*Math.PI/2-q);
x2 = x - (r-sr)*Math.cos(3*Math.PI/2-q);
y2 = y + (r-sr)*Math.sin(3*Math.PI/2-q);
x3 = x - (r-sr-6)*Math.cos(3*Math.PI/2-q);
y3 = y + (r-sr-5)*Math.sin(3*Math.PI/2-q);
}
if(q>=3*Math.PI/2 && q<2*Math.PI){
x1 = x - r*Math.sin(2*Math.PI-q);
y1 = y - r*Math.cos(2*Math.PI-q);
x2 = x - (r-sr)*Math.sin(2*Math.PI-q);
y2 = y - (r-sr)*Math.cos(2*Math.PI-q);
x3 = x - (r-sr-0)*Math.sin(2*Math.PI-q);
y3 = y - (r-sr-15)*Math.cos(2*Math.PI-q);
}
ctx.lineWidth = "1";
ctx.moveTo(x2,y2);
ctx.lineTo(x1,y1);
ctx.stroke();
if(i%5 == 0){
if(time == 0){
ctx.fillText("12",x3-8,y3);
}else if(time == 3){
ctx.fillText(time,x3+3,y3+5);
}else if(time == 6){
ctx.fillText(time,x3-3,y3+2);
}else if(time == 9){
ctx.fillText(time,x3+3,y3+5);
}else{
ctx.fillText(time,x3,y3);
}
}
}
}
function move(hour,min,sec){ //指针移动
if(hour >= 12){
hour -= 12;
}
hour+= min/60;
var arrSec = calculate(sec,30);
var arrMin = calculate(min,40);
var arrHour = calculate(hour*5+0.2,50);
var time;//定时器
ctx.lineWidth = "1";
ctx.moveTo(x,y);
ctx.lineTo(arrSec[0],arrSec[1]);
ctx.stroke();
ctx.moveTo(x,y);
ctx.lineTo(arrMin[0],arrMin[1]);
ctx.stroke();
ctx.moveTo(x,y);
ctx.lineTo(arrHour[0],arrHour[1]);
ctx.stroke();
drawClock();
time = setInterval(function(){
var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
hour = hours;min = minutes;sec = seconds;
if(hour >= 12){
hour -= 12;
}
hour+= min/60;
var arrSec = calculate(sec,30);
var arrMin = calculate(min,40);
var arrHour = calculate(hour*5+0.2,50);
ctx.clearRect(0,0,800,600);
ctx.moveTo(x,y);
ctx.lineTo(arrSec[0],arrSec[1]);
ctx.stroke();
ctx.moveTo(x,y);
ctx.lineTo(arrMin[0],arrMin[1]);
ctx.stroke();
ctx.moveTo(x,y);
ctx.lineTo(arrHour[0],arrHour[1]);
ctx.stroke();
drawClock();
drawClock();
},1000);
}
function calculate(i,sr){ //计算指针的位置
var q = i*2*Math.PI/60;
var m = new Array();
if(q>=0 && q<Math.PI/2){
m[0] =x + (r-sr)*Math.sin(q);
m[1] = y - (r-sr)*Math.cos(q);
}
if(q>=Math.PI/2 && q<Math.PI){
m[0] = x + (r-sr)*Math.sin(Math.PI-q);
m[1] = y + (r-sr)*Math.cos(Math.PI-q);
}
if(q>=Math.PI && q<3*Math.PI/2){
m[0] = x - (r-sr)*Math.cos(3*Math.PI/2-q);
m[1] = y + (r-sr)*Math.sin(3*Math.PI/2-q);
}
if(q>=3*Math.PI/2 && q<2*Math.PI){
m[0] = x - (r-sr)*Math.sin(2*Math.PI-q);
m[1] = y - (r-sr)*Math.cos(2*Math.PI-q);
}
return m;
}
function resize(){ //监听浏览器大小改变
var w = window.innerWidth;
x = window.innerWidth/2;
y = window.innerHeight/2;
if(w >= 750){
r = 80;
}else if(w < 750){
r = 60;
}
console.log(w);
var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
drawClock();
move(hours,minutes,seconds);
}
window.addEventListener("resize", resize);
})();
</script>
</body>
</html>
[/code]
本文共 184 个字数,平均阅读时长 ≈ 1分钟
点击广告查看隐藏内容....
受教了，你真的厉害?
没有，没有
可惜ie8好像不支持吧
ie8是不是不支持canvas,这个还真不知道
感觉WP上面添加一个这样的时钟没啥意义，囧。
也是
文章不错支持一下吧
canvas绘制时钟，学习了。js真的好强大。
文章格式不错
thx。。。。。。。。
以后多来这里学习，请各位多多指教