Rolex GMT-MASTER

--- theme: fancy --- 最近喜欢研究起了手表，对劳力士这款“百事圈”实在是心水的不行啊！心痒难耐无奈钱包不支持，作为一个前端程序员，买不起的东西该怎么办？当然是**自己做一个**啊！说干就干，熬夜自己做了个“百事圈”出来！源码在最后！ ## 先看成品 ![截屏2023-11-23 11.37.58.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5bc5cde3f704c5ebc063a44d6bc6851~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=910&h=556&s=325547&e=png&b=f7f7f7) 还是有那么六七成相像了吧！主要还是在颜色选择和细节处理上要花些功夫，无奈通过单纯的平面很难展现出“**材质感**”。 ![录屏2023-11-23 11.37.12.2023-11-23 11_38_44.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c39e19d16db6404f8c5a9bba423d141b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1126&h=1100&s=486493&e=gif&f=20&b=d4d4d4) 虽然质感比不上人家吧，但咱们这个走时精准度肯定比那钢砣子强不是🐶。除了实现了手表的“走时”这个基础功能外，还把**日历窗**、**GMT双时区功能**、**外圈旋转功能**也一并实现啦！图片里不好展示，大家可以看完文章，自行领取源码来玩玩！ ## 实现思路本想想用尽量多的CSS来实现，但CSS实现这种较为复杂的动态功能还是有些头疼，所以还是把思路放到了用canvas来实现。小小构思后手表被分为三个模块： * 表盘 ![截屏2023-11-23 13.41.56.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99831c20b7004d3f9d90fa637f68bcee~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=994&h=910&s=293578&e=png&b=dfdfdf) * 表圈 ![截屏2023-11-23 13.41.33.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62af3e6eba284abd8f8ca7ebef2927bc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1198&h=1198&s=563398&e=png&b=dbdbdb) * 表针 ![截屏2023-11-23 13.42.33.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b98057f1724c4ab39e9116d07cddaba9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1006&h=1028&s=254756&e=png&b=e0e0e0) 先在html结构中建立三个canvas标签： ```html

``` 并在JS中响应地对三个canvas进行初始化。每个canvas画布绘制的第一步，我们首先用`getContext("2d")`方法来获取到canvas画布的二维渲染上下文，并且为了能让画面清晰度更高，我们使用`.scale()`方法对canvas进行四倍缩放，这样我们可以得到一个清晰度更高的canvas画布： ```javascript const watchBox = document.querySelector(".watch-box"); const watchPointer = document.querySelector("#watchPointer"); const dial = document.querySelector("#dial"); const bezel = document.querySelector("#bezel"); const ctx = watchPointer.getContext("2d"); const dialCtx = dial.getContext("2d"); const bezelCtx = bezel.getContext("2d"); const ratio = 4; ctx.scale(ratio, ratio); dialCtx.scale(ratio, ratio); bezelCtx.scale(ratio, ratio); ``` 鉴于我们的手表中包含了不少颜色，这些颜色都会在canvas绘制中使用到，所以我们先把颜色存储在**变量**中方便后续使用： ```javascript // 初始化颜色变量 const gmtBezelRed = "#8a2811"; const blue = "#133760"; const black = "#10111e"; const white = "#fff"; const grayD = "#ddd"; const grayC = "#ccc"; const grayB = "#bbb"; const grayA = "#aaa"; const gray9 = "#999"; const gray8 = "#888"; const gmtPointerRed = "#aa0d0f"; const transparent = "grba(0,0,0,255)"; ``` 好，准备部分做完了，我们开始正题！构建绘制方法`drawGmtBezel`，首先对最简单的表圈部分进行绘制： ```javascript // 绘制表圈 function drawGmtBezel() { // 设置中心点，此时225，225变成了坐标的0，0 bezelCtx.translate(225, 225); // 阴影的x偏移 bezelCtx.shadowOffsetX = 50; // 阴影的y偏移 bezelCtx.shadowOffsetY = 50; // 阴影颜色 bezelCtx.shadowColor = "rgba(0, 0, 0, 0.5)"; // 阴影的模糊半径 bezelCtx.shadowBlur = 100; /** * 绘制陶瓷表圈 * @param {CanvasRenderingContext2D} bezelCtx * @param {number} begin * @param {number} end * @param {string} color * @returns **/ const drawCeramicCircle = (bezelCtx, begin, end, color) => { bezelCtx.beginPath(); bezelCtx.lineWidth = 26.5; bezelCtx.arc(0, 0, 113.25, begin, end); bezelCtx.strokeStyle = color; bezelCtx.stroke(); bezelCtx.closePath(); } // 画上表圈（蓝） drawCeramicCircle(bezelCtx, Math.PI, 2 * Math.PI, blue) // 画下表圈（红） drawCeramicCircle(bezelCtx, 0, Math.PI, gmtBezelRed) } ``` 目前的代码只是绘制出了双色表圈： ![截屏2023-11-23 14.26.57 2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8227904906964c90a155404bba2eeb16~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=688&h=736&s=197143&e=png&b=d9d9d9) 我们首先使用`bezelCtx.translate(225, 225)`来设置画布的原始点，由于我们要画的是圆心在画布中心点的表圈，所以我们把画布原始点设置到`225, 225`这个画布中心点的位置。之所以是225这个数字，是因为我们在canvas标签中将canvas大小设置为1800x1800，又在canvas初始化时把scale设置为4倍缩放，所以画布分辨率实际上就是1800/4，也就是450x450像素，中心点自然就是`225, 225`了。随后我们对表圈部分的阴影进行设置，这里就不用我多介绍啦，和CSS的box-shadow逻辑是一样的。接下来就是绘制的部分了，我们再来看看代码： ```javascript const drawCeramicCircle = (bezelCtx, color, begin, end) => { bezelCtx.beginPath(); bezelCtx.lineWidth = 26.5; bezelCtx.arc(0, 0, 113.25, begin, end); bezelCtx.strokeStyle = color; bezelCtx.stroke(); bezelCtx.closePath(); } ``` 我们首先用`beginPath`方法来开始一个新路径，可以理解为调用一只新“画笔”，我们在canvas中的所有线条绘制都要靠这个“画笔”来进行。思路其实很简单，每个画面都是由一笔一画的基础元素组成的，我们需要对这些基础元素进行拆解，每一笔不一样的笔触都需要换一只新笔，然后设置这只笔的各种属性，最后再进行绘画。我们随后就使用`lineWidth()`和`strokeStyle()`设置这只“画笔”的粗细、颜色属性，并且使用`arc`方法来绘制一个“弧形”，这个`arc`方法接收五个参数：圆心的 x 轴坐标、圆心的 y 轴坐标、圆弧的半径、圆弧的起始点、圆弧的终点。我们在前面已经把画布的起始点设置为画布中心了，所以前两个圆心参数我们都传入0，半径就选用113.25这个数字（纯为了比例协调），起点和终点的设置就需要稍微计算一下了，所谓的“圆弧起始点”默认是x轴上右侧的半径切点： ![截屏2023-11-23 15.03.28.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1dd711a9ca594fe092f874805b9c82a7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1616&h=1252&s=229015&e=png&b=ffffff) 所以如果我们要先画“下半圈”的话，起点也就是`0`，终点也就是在x轴的左侧。这两个参数的单位都是“弧度”，一个半圆对应的弧度也就是PI，所以下半圆的起始点是0，终点是PI。按照这样调用方法`drawCeramicCircle(bezelCtx, 0, Math.PI, gmtBezelRed)`，看看效果： ![截屏2023-11-23 15.10.52.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4231498717d4b2bb9074b2ca64fa8c6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=786&h=762&s=188326&e=png&b=dbdbdb) 没问题，我们再用同样的逻辑`drawCeramicCircle(bezelCtx, Math.PI, 2 * Math.PI, blue)`制作上半圈： ![截屏2023-11-23 14.26.57 2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8227904906964c90a155404bba2eeb16~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=688&h=736&s=197143&e=png&b=d9d9d9) 最后我们用`stroke`方法来进行绘制，图像就被绘制出来了！这就实现啦，逻辑其实不过就是这样：新建路径（画笔）—> 设置路径属性 —> 设置路径信息 —> 绘制。表盘的逻辑也是一致，只要你稍微掌握如何在canvas中绘制矩形、线条，实现起来其实没有什么难度，我们直接快进到表针部分： ```javascript function drawWatchPointer() { // 设置中心点，此时225, 225变成了坐标的0，0 ctx.translate(225, 225); // 获取当前时分秒 let time = new Date(); let day = time.getDate(); let hour = time.getHours() % 12; let min = time.getMinutes(); let second = time.getSeconds(); let millsecond = time.getMilliseconds(); // 时针 ctx.rotate(((2 * Math.PI) / 12) * hour + ((2 * Math.PI) / 12) * (min / 60) - Math.PI / 2); ctx.beginPath(); ctx.lineWidth = 3; ctx.fillStyle = white; ctx.fillRect(0, -4, 40, 8); ctx.strokeStyle = grayA; ctx.strokeRect(0, -3, 40, 6); ctx.closePath(); // 奔驰针头上三角 ctx.beginPath(); ctx.moveTo(48, -4.5); ctx.lineTo(57, 0); ctx.lineTo(48, 4.5); ctx.lineWidth = 2; ctx.strokeStyle = grayA; ctx.fillStyle = white; ctx.fill(); ctx.stroke(); ctx.closePath(); // 绘制奔驰针 ctx.beginPath(); ctx.arc(40, 0, 10, 0, 2 * Math.PI); ctx.fillStyle = white; ctx.lineWidth = 2; ctx.strokeStyle = grayA; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(30, 0); ctx.lineTo(39, 0); ctx.lineTo(46.5, 7); ctx.lineTo(39, 0); ctx.lineTo(46.5, -7); ctx.lineWidth = 2; ctx.strokeStyle = grayA; ctx.stroke(); ctx.closePath(); } ``` 其实可以看到，整体逻辑和画表圈并没有什么不同，只是有一些新的方法需要学习。我们还是顺着逻辑走一遍： 1. 设置画布中心点为`255, 255` 2. 通过`new Date()`获取当前时间 3. 表针其实就是一个固定的矩形，只是需要改变矩形的旋转就可以表示时间。所以通过`((2 * Math.PI) / 12) * hour + ((2 * Math.PI) / 12) * (min / 60) - Math.PI / 2`来计算出当前时间对于时针来说需要旋转的角度并传参给`rotate`方法，使用`rotate`方法可以旋转绘制的角度 4. 新建路径，并设置路径属性（粗细、颜色） 5. 使用`fillRect`来绘制矩形，四个参数分别代表x起始点、y起始点、宽、高 6. 结束表针本体的绘制，使用`closePath`来清除画笔信息。接下来绘制表针的针头（三角形） 7. 使用`moveTo`方法来移动画笔起始位置 8. 使用`lineTo`方法来从画笔起始位置绘制一条直线，参数为直线终点的x和y 9. 连续绘制三条直线，形成三角形 10. 使用`fill`来填充矩形内部的颜色 11. 结束表针本体的绘制，使用`closePath`来清除画笔信息。接下来绘制表针的奔驰针部分（圆形） 12. … 可以看到，其实使用逻辑都是一样的，不过就是上面说的这些，你可以自己尝试一下把分针和秒针给实现出来，应该就会对canvas有个基本的认识啦。时针的实现效果： ![截屏2023-11-23 15.43.12.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0143fb8b79054a04a7a637ae513efe9f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=498&h=482&s=64695&e=png&b=e0e0e0) ## 完整源码 Canvas的基础知识都是比较零碎但深度普遍不深的，我就不带着大家把每个实现都过一遍了，直接把源码拿出来，大家随意取用！可以试着在这个源码基础上，把自己喜欢的别的表也给做出来，做这玩意有种玩“我的世界”的快感，快来试试吧！熬夜写的代码比较匆忙，还有很大的优化空间，我就以此抛砖引玉啦： ```html Rolex GMT-MASTER

```