新手小白包教包会的 —— canvas画时钟
本次画时钟的几个步骤： 1. 布置静态表盘。 2. 布置数字 3.设置时分秒的指针转动速度
技术点： canvas 和 javaScript
思路： 利用canvas画圆 和 利用 js获取时间戳，动态绘制表盘，实现时钟指针的走动。
关于canvas的简单介绍： canvas标签上要绑定宽，高； canvas的默认中心点为左上角，默认的水平方向为x轴；
这3点在之后的时钟制作中都需要知道。
下面是思路详解：
- 静态表盘
这部分比较简单，基本都是canvas的API。
2. 布置数字
这部分的整体思路就是：设置fillText( 文本, 坐标x, 坐标y )；（文本为：1，2，3，4...11，12）
重点是获取文本的坐标 x, y
这里，我们利用的是Math的两个API : Math.sin 正弦 和 Math.cos 余弦 来求得当前的文字坐标x，y （ 不懂sin 和 cos 可以看一下勾股定理 ）
因为canvas的默认圆心为左上角，所以，我们要移动圆心，分别加上宽 和 高 的 一半。
3.绘制指针
这部分就是之前说的，在一定的时间内重绘。来实现转动的效果
这里有一个clearRect（），清空给定矩形的指定像素
这里有一个地方需要注意：因为系统返回的时间是24小时制，表盘上是12小时制的，所以，是需要做一下判断的：
h > 12 ? h = h -12 : h;
这里绘制时分秒的方法是c.arc(x, y ,r , (h * 30 - 90) * Math.PI / 180, (h * 30 + 1 - 90) * Math.PI / 180, false ) );
注意： 这里 要 - 90度的，之前提到的，canvas的默认水平方向是X轴。
到了这里，一个简单的时钟效果就制动完成了。如果有什么好的建议希望大家指出。
如果觉得对您有帮助，那就给个赞呗。
效果图、代码 如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆环</title>
</meta>
<style>
#canvas {
border: 1px solid #999;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas>
<script>
const ctx = document.getElementById("canvas");
const c = ctx.getContext('2d');
//静态表盘
function start(){
c.beginPath();
c.arc(250,250,240,0,360);
c.fillStyle='#000';
c.fill();
let deg = 70;
let drawPosition = 180 - deg;
c.beginPath();
c.moveTo(250,250);
c.arc(250, 250, 250, -90 * Math.PI / 180, -45 * Math.PI / 180, false);
c.fillStyle='red';
c.fill();
c.beginPath();
c.arc(250,250,230, 0, 360);
c.fillStyle='#999';
c.fill();
}
//圆心
function origin(){
c.beginPath();
c.arc(250,250,5, 0, 360);
c.fillStyle='black';
c.fill();
}
//数字
function addText(){
var houre = [6,5,4,3,2,1,12,11,10,9,8,7];
for (var degNum = 0;degNum < 360; degNum += 30){ //数字
var r = ctx.width / 2 * 0.8;
var textX = r * Math.sin((degNum) * 2 * Math.PI/360) + ctx.width / 2;
var textY = r * Math.cos((degNum) * 2 * Math.PI/360) + ctx.height / 2;
c.font = r*0.1 + "px Arial";
c.textBaseline = "middle";// 文字垂直对齐方式
c.textAlign = "center"; // 文字水平对齐方式
c.fillText(houre[degNum / 30],textX ,textY);
//画刻度
c.beginPath();
c.arc(250,250,r*0.8,0,360); //圆
c.strokeStyle='#fff';
c.stroke();
}
}
start();
addText();
//获取时间
setInterval(() => {
var dataNow = new Date();
var h = dataNow.getHours();
var m = dataNow.getMinutes();
var s = dataNow.getSeconds();
h > 12 ? h = h -12 : h;
c.clearRect(0,0,ctx.width,ctx.height);
start();
drawHours(h);
drawMinutens(m);
drawSecondes(s);
origin();
addText();
},1000);
//绘制时
function drawHours(h){
c.save();
c.beginPath();
c.moveTo(250,250);
c.arc(250,250,100,(h * 30 - 90) * Math.PI / 180, (h * 30 + 1 - 90) * Math.PI / 180,false);
c.fillStyle = '#000';
c.fill();
c.closePath();
c.restore();
}
//绘制分
function drawMinutens(m){
c.save();
c.beginPath();
c.moveTo(250,250);
c.arc(250, 250, 120, (m * 6 - 90) * Math.PI / 180, (m * 6 + 1 - 90) * Math.PI /180, false);
c.fillStyle='yellow';
c.fill();
c.closePath();
c.restore();
}
//绘制秒
function drawSecondes(s){
c.save();
c.beginPath();
c.moveTo(250,250);
c.arc(250,250,130,(s * 6 - 90) * Math.PI / 180, (s * 6 + 1 - 90) * Math.PI / 180);
c.fillStyle='#fff';
c.fill();
c.closePath();
c.restore();
}
</script>
</body>
</html>