利用canvas画一个钟表（时分秒联动）
2019-05-14 本文已影响0人
傲慢的上校130
canvas
- 前段时间做微信小程序项目，用到了微信canvas组件生成分享海报，很多东西都生疏了，就想着复习一下canvas的常用知识做一个clock出来。查阅canvas技术文档和相关资料，现将自己整理的代码和自己的理解记录在此，加深记忆，方便以后查阅。也希望有能看到本文的各位朋友批评指正。
-
代码之前 先上效果图吧
微信截图_clock.png
- 代码扑面而来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布-钟表</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id='clock' width='600' height='600' style="margin: 150px;"></canvas>
<script>
var canvas = document.getElementById('clock');
const cxt = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var r = width / 2;
function drawBg() { //画背景(表盘)
//重置原点
cxt.save();//保存当前状态
cxt.translate(r,r);//重置坐标原点
//画时钟外圈
cxt.beginPath();//开始绘制
cxt.arc(0, 0, r-8, 0, 2*Math.PI,true);//创建弧/曲线（用于创建圆或部分圆）
cxt.lineWidth = 8;//线宽
cxt.stroke();//路径(空心)
//画小时数
let hour = [3,4,5,6,7,8,9,10,11,12,1,2];//弧的圆形的3点钟位置是 0 度
//rad弧度：弧长与半径比 那么一个圆的弧度为2π，1弧度的弧长为半径
//1°的弧长为2πr/360,那么1°的弧度为2π/360
//360°/12 = 30° 数学公式正弦sin(角度),js则是sin(弧度),所以要计算出弧度
// ↓ 小时数之间的弧度为 2π÷12 ↓
let hour_rad = 2*Math.PI/12;//小时数之间的弧度间隔
cxt.font = "40px sans-serif";//字体
cxt.textAlign = "center";//左右居中
cxt.textBaseline = "middle";//上下居中
let r1 = r - 65;//减短长度,让内容收到圆圈内部
let r2 = r - 23;//减短长度,让内容收到圆圈内部
//循环依次画出12个数字（从3点开始）
for(var i in hour){
cxt.fillStyle = "#000"
cxt.fillText(hour[i],r1*Math.cos(i*hour_rad),r1*Math.sin(i*hour_rad))
}
//画刻度(圆点)
let minute_rad = 2*Math.PI/60;//分钟之间的间隔弧度
for(i = 0; i <= 60; i ++) {
let x = r2*Math.cos(i*minute_rad);
let y = r2*Math.sin(i*minute_rad);
cxt.beginPath();
if(i % 15 == 0){//每刻钟位置
cxt.fillStyle = "red";//文本字体颜色
cxt.arc(x ,y , 5, 0, 2*Math.PI, true);
}
else if(i % 5 == 0){//整点位置
cxt.fillStyle = "#000";
cxt.arc(x ,y , 4, 0, 2*Math.PI, true);
}
else{//普通位置
cxt.fillStyle = "#bbb";
cxt.arc(x ,y , 3, 0, 2*Math.PI, true);
}
cxt.fill();//填充(实心)
}
//画时钟内圈
cxt.beginPath();
cxt.arc(0, 0, r-32, 0, 2*Math.PI,true);
cxt.lineWidth = 3;
cxt.stroke();//线条、线性路径
}
//画时针
function drawHour(hour,minute,second) {
cxt.save();//保存当前
var rad = 2 * Math.PI * ( hour/12 + minute/720 + second/43200);
cxt.beginPath();
cxt.rotate(rad);//旋转角度
cxt.moveTo(0, 10);
cxt.lineTo(0, -r/2);
cxt.lineWidth = 10;
cxt.lineCap = "round";//线段末端样式
cxt.stroke();
cxt.restore();//恢复上一步保存的状态
}
//画分针
function drawMinute(minute,second) {
cxt.save();
var rad = 2 * Math.PI * (minute/60 + second/3600);
cxt.beginPath();
cxt.rotate(rad);//旋转角度
cxt.moveTo(0, 15);
cxt.lineTo(0, -r/1.5);
cxt.lineWidth = 6;
cxt.lineCap = "round";
cxt.stroke();
cxt.restore();
}
// 画秒针
function drawSecond(second) {
cxt.save();
var rad = 2 * Math.PI * (second / 60) ;
cxt.beginPath();
cxt.rotate(rad);
cxt.moveTo(0, 25);
cxt.lineTo(2, 25);
cxt.lineTo(-2, 25);
cxt.lineTo(-1, -r/1.25);
cxt.lineTo(1, -r/1.25);
cxt.lineTo(2, 25);
cxt.lineWidth = 2;
cxt.fillStyle = "#f00";
cxt.fill();
cxt.restore();
}
// 画中心点
function drawDot() {
cxt.beginPath();
cxt.arc(0, 0, 8, 0, 2*Math.PI,true);
cxt.fillStyle = "red";
cxt.fill();
}
//把所有方法每秒调用一下,表就走起来了
setInterval(function(){
//获取时分秒
let second = new Date().getSeconds();
let minute = new Date().getMinutes();
let hour = new Date().getHours();
cxt.clearRect(0, 0, width, height);//每次清除所有
//再重新画出所有
drawBg();//表盘 数字 刻度
drawHour(hour,minute,second);//时针
drawMinute(minute,second);//分针
drawSecond(second);//秒针
drawDot();//中心圆点
cxt.restore();
},1000)
</script>
</body>
</html>
- 小结：计算刻度位置坐标时用到了js中Math对象的sin()和cos()方法，它们用到的是弧度rad参数，而不是角度，所以应先理解弧度的概念及圆周的弧度与角度的关系。可参考 百度百科=>弧度
