相信学了HTML5新增的Canvas的小伙伴都非常感叹其功能之强大,可以帮助我们做许多关于画布的绘画以及对图形的操作,那么今天就带大家实现一个简单实时的时钟效果,含有源码和注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#myCanvas{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
// 创建一个canvas画布
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
// 获取canvas
var cas = document.querySelector("#myCanvas");
// 创建画布
var gtx = cas.getContext("2d");
// 创建准度
var deg = Math.PI*2/360;
// 设置钟表圆点
gtx.translate(250,250);
function waiUp(){
// 绘制钟表最外面边框
gtx.beginPath();
gtx.StrokeStyle = "block";
gtx.lineWidth = 10;
gtx.arc(0,0,200,0,Math.PI*2);
gtx.stroke();
// 绘制钟表里面的刻度
// sin -- 表示对边 : 斜边
// cos -- 表示邻边 : 斜边
// 创建60个圆点中每个需要的准度
var degL = Math.PI*2/60;
for(var i=0;i<60;i++){
gtx.save(); // 存档
// 创建圆点
var x = Math.cos(degL * i)*(200-20);
var y = Math.sin(degL * i)*(200-20);
// console.log(x,y);
gtx.beginPath();
// 设置特殊刻度颜色
if(i % 5 == 0){
gtx.fillStyle = "pink";
}else{
gtx.fillStyle = "#000";
}
gtx.arc(x,y,5,0,Math.PI*2);
gtx.fill();
gtx.restore(); //回档
}
// 设置刻度上的数字
// 设置数字样式
gtx.beginPath();
gtx.textAlign = "center";
gtx.textBaseline = "middle";
gtx.font = "bold 15px 宋体";
// 设置数字的准度
var degS = Math.PI*2/12;
var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
arr.forEach(function(obj,index){
// gtx.save();
// 设置坐标
var x = Math.cos(degS * index) * (200-40);
var y = Math.sin(degS * index) * (200-40);
// console.log(x,y);
// 设置文字
gtx.fillStyle = "#000";
gtx.fillText(obj,x,y);
})
}
// 设置时针
function shiUp(h,f){
gtx.save();
gtx.rotate(2 * Math.PI / 360 * -90);
// 获取时针准度
var shideg = 2 * Math.PI / 12 * h;
// 获取分针准度
var fendeg = 2 * Math.PI / 60 / 12 * f;
gtx.beginPath();
gtx.rotate(shideg + fendeg);
gtx.lineCap = "round";
gtx.lineWidth = 10;
gtx.strokeStyle = "#284444";
gtx.moveTo(-20,0);
gtx.lineTo(80,0);
gtx.stroke();
gtx.restore();
}
// 设置分针
function fenUp(f){
gtx.save();
gtx.rotate(2 * Math.PI / 360 * -90);
// 获取分针准度
var fendeg = 2 * Math.PI / 60 * f;
gtx.beginPath();
gtx.rotate(fendeg);
gtx.lineCap = "round";
gtx.lineWidth = 8;
gtx.strokeStyle = "#d2deff";
gtx.moveTo(-20,0);
gtx.lineTo(100,0)
gtx.stroke();
gtx.restore();
}
// 设置秒针
function miaoUp(s){
gtx.save();
gtx.rotate(Math.PI * 2 / 360 * -90);
// 获取秒针准度
var miaodeg = 2 * Math.PI / 60 * s;
gtx.beginPath();
gtx.rotate(miaodeg);
gtx.lineCap = "round";
gtx.lineWidth = 5;
gtx.strokeStyle = "#000";
gtx.moveTo(-20,0);
gtx.lineTo(120,0)
gtx.stroke();
gtx.restore();
}
function zhongUp(){
// 设置中心圆点
gtx.beginPath();
gtx.fillStyle = "#ca9dcb";
gtx.arc(0,0,10,0,360*deg);
gtx.fill();
}
function addUp(){
// 清空画布
gtx.clearRect(-250,-250,500,500);
var date = new Date();
var hover = date.getHours();
var min = date.getMinutes();
var sed = date.getSeconds();
waiUp();
shiUp(hover,min);
fenUp(min);
miaoUp(sed);
zhongUp();
}
addUp();
setInterval(addUp,1000);
</script>
</body>
</html>
看效果:
喜欢的拿去试试吧!