<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
text-align: center;
margin-top:250px;
}
#clock{
border:1px solid #ccc;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="200px" width="200px"> </canvas>
</div>
<script>
var canvas=document.getElementById('clock');
var ctx=canvas.getContext("2d");
var r=(canvas.width)/2; //半径
// 比例 为了放大缩小的美观
var rem=canvas.width/200
function drawBackground(){
ctx.save()
// 默写原点是左上角，可以重新定义,定义到正方形的中心
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth=10*rem;
ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false) //默认false为顺时针
ctx.stroke();
// 定义小时数放到数组里
var hourNumber=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18*rem+"px Arial";
ctx.textAlign="center";
ctx.textBaseline="middle";
// hourNumber.forEach(function(number,i){
// // 定义弧度的
// var rad=2*Math.PI /12 * i;
// //cos 领边/斜边
// var x=Math.cos(rad) * (r-30);
// var y=Math.sin(rad) * (r-30);
// ctx.fillText(number,x,y)
// })
for(var i=0;i<hourNumber.length;i++){
var rad=2*Math.PI /12 * i;
//cos 领边/斜边
var x=Math.cos(rad) * (r-30*rem);
var y=Math.sin(rad) * (r-30*rem);
ctx.fillText(hourNumber[i],x,y)
}
for (var j=0;j<60;j++){
var rad=2*Math.PI /60 * j;
var x=Math.cos(rad) * (r-17*rem);
var y=Math.sin(rad) * (r-17*rem);
ctx.beginPath();
if(j%5==0){
ctx.fillStyle="#000"
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}else{
ctx.fillStyle="#ccc"
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill()
}
}
//画时针
function drawHour(hour,minute){
ctx.save()
ctx.beginPath();
var rad=2*Math.PI /12 * hour;
// 分钟所引起的弧度
var mrad=2*Math.PI /12/60*minute;
ctx.rotate(rad+mrad);
ctx.lineWidth=6*rem;
//设置线的两端是圆的
ctx.lineCap="round";
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
//画分针
function drawMinute(minute){
ctx.save()
ctx.beginPath();
var rad=2*Math.PI /60 * minute;
ctx.rotate(rad);
ctx.lineWidth=3*rem;
//设置线的两端是圆的
ctx.lineCap="round";
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+30*rem);
ctx.stroke();
ctx.restore()
}
//画秒针
function drawSecond(second){
ctx.save()
ctx.beginPath();
var rad=2*Math.PI /60 * second;
ctx.rotate(rad);
ctx.fillStyle='red';
ctx.moveTo(-2*rem,20*rem);
ctx.lineTo(2*rem,20*rem);
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill()
ctx.restore()
}
//画连接时分秒的一个小圆点
function drawDot(){
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(0,0,3*rem,0,2*Math.PI);
ctx.fill();
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height)
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
drawBackground()
drawHour(hour,minute)
drawMinute(minute)
drawSecond(second)
drawDot()
ctx.restore()
}
draw()
setInterval(draw,1000);
</script>
</body>
</html>
效果如下
canvas时钟特效.png
