用户名
密码

canvas绘制时钟

zhinianblog
2017-10-27 / 11 评论 / 1 阅读 / 正在检测是否收录...

不知大家是否看见有的网站会有一个时钟,今天给大家分享一个自己用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://www.zhinianblog.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]

0

评论 (11)

取消
  1. 头像
    嬴冰
    Android · QQ Browser

    受教了,你真的厉害?

    回复
    1. 头像
      执念 作者
      Android · Google Chrome
      @ 嬴冰

      没有,没有

      回复
  2. 头像
    知道91博客
    Windows 10 · Google Chrome

    可惜ie8好像不支持吧

    回复
    1. 头像
      执念 作者
      Windows 10 · Google Chrome
      @ 知道91博客

      ie8是不是不支持canvas,这个还真不知道

      回复
  3. 头像
    夏日博客
    Windows 7 · Google Chrome

    感觉WP上面添加一个这样的时钟没啥意义,囧。

    回复
    1. 头像
      执念 作者
      Android · Google Chrome
      @ 夏日博客

      也是

      回复
  4. 头像
    新闻头条
    Windows 7 · Google Chrome

    文章不错支持一下吧

    回复
  5. 头像
    无刷直流水泵
    Windows 10 · Google Chrome

    canvas绘制时钟,学习了。js真的好强大。

    回复
  6. 头像
    智慧家庭
    Windows 7 · Google Chrome

    文章格式不错

    回复
    1. 头像
      JIUCAIJIUCAI
      Windows 10 · FireFox
      @ 智慧家庭

      thx。。。。。。。。

      回复
    2. 头像
      跨境电商平台
      Windows 10 · FireFox
      @ 智慧家庭

      以后多来这里学习,请各位多多指教

      回复