HTML5-Canvas动态时钟
Canvas基础小案例-动态小时钟
<html>
<head>
<link rel="icon" href="https://cdn.anyway1314.cn/firework20200317.png">
<title>Canva动态时钟title>
head>
<body style="background: lightsteelblue;">
<canvas id=mycanvas width=500 height=500 style="margin: 200px 650px;">canvas>
<script>
// 获取Canvas对象
var cav=document.getElementById("mycanvas");
//获取对应的CanvasRenderingContext2D对象(画笔)
var cxt=cav.getContext("2d");
function drawClock(){
cxt.clearRect(0,0,500,500)
var now=new Date()
sec=now.getSeconds()
min=now.getMinutes()
hour=now.getHours()
hour=hour+min/60
hour=hour>12?hour-12:hour
// 内部阴影
cxt.beginPath()
//绘制一个以坐标点(250,250)为圆心、半径为190px的圆形
cxt.arc(250,250,190,0,2*Math.PI,false)
//创建一个表示放射性颜色渐变的CanvasGradient对象
//该对象的作用域是以(258,258)为圆心、半径为175px的内圆和以(258,258)为圆心、半径为190px的外圆之间的环状区域
var grad=cxt.createRadialGradient(258,258,175,258,258,190)
grad.addColorStop(0,"#fff")
grad.addColorStop(0.8,"#ddd")
// grad.addColorStop(1,"#ccc")
cxt.fillStyle=grad
cxt.fill()
cxt.stroke()
cxt.closePath()
// 画表盘外圈
//灰色外边
cxt.beginPath()
cxt.strokeStyle='#aaa';
cxt.lineWidth=2;
cxt.arc(250,250,208,0,2*Math.PI,false)
cxt.stroke()
cxt.closePath()
//白圈
cxt.beginPath()
cxt.strokeStyle='white';
cxt.lineWidth=14;
cxt.arc(250,250,200,0,2*Math.PI,false)
cxt.stroke()
cxt.closePath()
// 画表盘
cxt.beginPath()
cxt.strokeStyle='black';
cxt.lineWidth=3;
cxt.arc(250,250,190,0,2*Math.PI,false)
cxt.stroke()
cxt.closePath()
// 画时刻度
for(var i=0;i<12;i++){
cxt.beginPath()
cxt.save()
cxt.translate(250,250)
cxt.lineWidth=3
cxt.strokeStyle='black'
cxt.rotate(i*30*Math.PI/180)
cxt.moveTo(0,-190)
cxt.lineTo(0,-170)
cxt.stroke()
cxt.restore()
cxt.closePath()
}
// 画分刻度
for(var i=0;i<60;i++){
cxt.beginPath()
cxt.save()
cxt.translate(250,250)
cxt.lineWidth=2
cxt.strokeStyle='black'
cxt.rotate(i*6*Math.PI/180)
cxt.moveTo(0,-190)
cxt.lineTo(0,-180)
cxt.stroke()
cxt.restore()
cxt.closePath()
}
//时间数字
for(var i=1;i<=12;i++){
cxt.beginPath()
cxt.save()
cxt.translate(238,265)
cxt.fillStyle='black'
cxt.font="normal bold 47px 黑体"
//x,y控制时钟数字的位置
var x=Math.cos(2*Math.PI/12.16*i)*154
var y=Math.sin(2*Math.PI/12*i)*145
var temp=(i+3)%12
var hour=temp?temp:12
cxt.fillText(hour,x,y)
cxt.stroke()
cxt.restore()
cxt.closePath()
}
//写字
var endTime=new Date("2020/12/21 00:00:00");
var second = parseInt((endTime.getTime()-now.getTime())/1000);
var d = parseInt(second/3600/24); //天数
cxt.fillStyle='#ca0c16'
cxt.font="normal bold 16px 楷体"
cxt.fillText("距2021考研: "+d+"天 ",180,335)
//画时针
cxt.beginPath()
cxt.save()
cxt.translate(250,250)
cxt.lineWidth=6
cxt.strokeStyle='black'
cxt.rotate(30*hour*Math.PI/180)
cxt.moveTo(0,-80) //时针长度
cxt.lineTo(0,20) //时针尾部
cxt.stroke()
cxt.restore()
cxt.closePath()
// 画分针
cxt.beginPath()
cxt.save()
cxt.translate(250,250)
cxt.lineWidth=4
cxt.strokeStyle='black'
cxt.rotate(min*6*Math.PI/180)
cxt.moveTo(0,-118)
cxt.lineTo(0,18)
cxt.stroke()
cxt.restore()
cxt.closePath()
// 画秒针
cxt.beginPath()
cxt.save()
cxt.translate(250,250)
cxt.lineWidth=2
cxt.strokeStyle='black'
cxt.rotate(sec*6*Math.PI/180)
cxt.moveTo(0,-118)
cxt.lineTo(0,30)
cxt.stroke()
cxt.restore()
cxt.closePath()
// 画圆心
cxt.beginPath()
cxt.save()
cxt.translate(250,250)
cxt.lineWidth=1
cxt.strokeStyle='white'
cxt.fillStyle="black"
cxt.arc(0,0,5,0,2*Math.PI,true)
cxt.stroke()
cxt.fill()
cxt.restore()
cxt.closePath()
//画秒针末端圆圈
// cxt.beginPath()
// cxt.save()
// cxt.translate(250,250)
// cxt.lineWidth=1
// cxt.strokeStyle='white'
// cxt.fillStyle="black"
// cxt.rotate(sec*6*Math.PI/180)
// cxt.arc(0,-100,3.5,0,2*Math.PI,true)
// cxt.stroke()
// cxt.fill()
// cxt.restore()
// cxt.closePath()
}
//setInterval(drawClock,1000)
function anim(){
requestAnimationFrame(function(){
drawClock()
anim()
})
}
anim()
script>
body>
html>