今天我们来写一个非常简单的canvas时钟
canvas大家应该都很熟悉是像素图,svg是矢量图
话不多说,写代码
这是最终效果图
<canvas width="500px" height="500px"></canvas>
<div id="father">
<!-- 小时 -->
<span id="one"></span>
<!-- 分钟 -->
<span id="two"></span>
<!-- 秒 -->
<span id="three"></span>
</div>
这里我是把表的实时时间分为三部分写的,大家也可以用一个写,只要用字符串拼接就行
var canvas = document.getElementsByTagName('canvas')[0];
var one = document.getElementById("one")
var two = document.getElementById("two")
var three = document.getElementById("three")
// 获取画板的渲染上下文
var ctx = canvas.getContext('2d');
// console.log(shi);
// console.log(fen);
// console.log(miao);
var aa, bb, cc
这里我们是使用时间戳来获取当前时间
var timer = setInterval(function () {
var now = new Date()
var shi = now.getHours()
var fen = now.getMinutes()
var miao = now.getSeconds()
one.innerHTML = shi + ":"
two.innerHTML = fen + ":"
three.innerHTML = miao
aa = (shi / 2) * 2
bb = (fen / 60) * 2
cc = (miao / 60) * 2
//表盘
ctx.clearRect(0, 0, 600, 600);
ctx.save()
ctx.beginPath()
ctx.arc(250, 250, 200, 0, Math.PI * 2, 1);
ctx.stroke();
ctx.restore();
ctx.save()
ctx.beginPath()
ctx.arc(250, 250, 5, 0, Math.PI * 2, 1);
ctx.stroke();
ctx.restore();
//时针
ctx.save()
ctx.beginPath()
ctx.translate(250, 250)
ctx.rotate(Math.PI * aa);
ctx.moveTo(0, 0)
ctx.lineTo(0, -100)
ctx.stroke();
ctx.restore();
//分针
ctx.save()
ctx.beginPath()
ctx.translate(250, 250)
ctx.rotate(Math.PI * bb);
ctx.moveTo(0, 0)
ctx.lineTo(0, -125)
ctx.stroke();
ctx.restore();
//秒针
// aa = aa + 0.1
ctx.save()
ctx.beginPath()
ctx.translate(250, 250)
ctx.rotate(Math.PI * cc);
ctx.moveTo(0, 0)
ctx.lineTo(0, -150)
ctx.stroke();
ctx.restore();
}, 30)
然后这就是简单的画圆,然后需要什么样式大家自己调整就好
真的很简单,一个简单的canvas,加上时间戳就行