您的位置：首页 > Web前端 > HTML5

利用 html5 canvas 完成一个实时时钟 demo

2020-07-25 23:19 1016 查看

利用canvas实现一个实时时钟动画

效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="mycanvas" width=" 400" height="400"></canvas>
<script>
var mycarvas = document.querySelector('#mycanvas')
//获取上下文（绘画环境）
var ctx = mycanvas.getContext("2d");
(function play () {
//清除上一次
ctx.clearRect(0,0,mycanvas.width,mycanvas.height)
//保存
ctx.save()
//确定中心点
ctx.translate(mycanvas.width/2,mycanvas.height/2);
biaopan ()
run ()
//还原
ctx.restore()
requestAnimationFrame(play)
})()
//绘制静态
function biaopan () {
//绘制表盘
ctx.strokeStyle = '#777'
ctx.lineWidth = 6;
//初始化路径
ctx.beginPath()
//画圆
ctx.arc(0,0,150,0,2*Math.PI)
ctx.stroke()
//分针刻度
ctx.strokeStyle = '#ccc'
ctx.lineWidth = 2
for(var i = 0;i<60;i++){
ctx.beginPath()
ctx.moveTo(0,-130)
ctx.lineTo(0,-140)
ctx.stroke()
ctx.rotate(2*Math.PI/60)
}
//时针刻度
ctx.strokeStyle = '#17f'
ctx.lineWidth = 6
for(var i = 0;i<12;i++){
ctx.beginPath()
ctx.moveTo(0,-120)
ctx.lineTo(0,-140)
ctx.stroke()
ctx.rotate(2*Math.PI/12)
}
//数字
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillStyle = 'green'
ctx.font = '20px 微软雅黑'
for(var i=1; i<13;i++) {
ctx.fillText(i,Math.sin(2*Math.PI/12*i)*100,Math.cos(2*Math.PI/12*i)*-100)
}
}
//绘制动态
function run () {
//得到现在时间
var d = new Date()
var h = d.getHours()
var m = d.getMinutes()
var s = d.getSeconds()

//时针
ctx.save()
//分针走60小格，时针走5小格，分针12格，时针1格
ctx.rotate(2*Math.PI/12*h+(2*Math.PI/60*m+2*Math.PI/60*s/60)/12)
ctx.strokeStyle = 'blue'
ctx.lineWidth = 8
ctx.beginPath()
ctx.moveTo(0,18)
ctx.lineTo(0,-60)
ctx.stroke()
ctx.restore()
//分针
ctx.save()
//秒针走60格，分针走一格
ctx.rotate(2*Math.PI/60*m+2*Math.PI/60*s/60)
ctx.strokeStyle = '#f71'
ctx.lineWidth = 4
ctx.beginPath()
ctx.moveTo(0,20)
ctx.lineTo(0,-100)
ctx.stroke()
ctx.restore()
//秒针
ctx.save()
ctx.rotate(2*Math.PI/60*s)
ctx.strokeStyle = '#f00'
ctx.lineWidth = 4
ctx.beginPath()
ctx.moveTo(0,20)
ctx.lineTo(0,-110)
ctx.stroke()
ctx.restore()
//中心圆
ctx.fillStyle = '#777'
ctx.beginPath()
ctx.arc(0,0,10,0,2*Math.PI)
ctx.fill()
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航