抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表

❉ 用JavaScript/Canvas实现网红太空人表盘

听说太空人表盘火了！程序员也不能落后，代码安排-用javascript写的一个太空人表盘~网上最近太空人表盘很火，效果感觉还不错，安排走起！

---

外太空效果图↓↓↓(已兼容 H5移动端 和 pc端 )

JavaScript实现版本

JavaScript实现版本在线演示地址

canvas实现版本

Canvas实现版本在线演示地址

外太空代码-文件目录↓

一、3D相册(代码实现)

html (部分)

   <div id="watch">
            <img id="elec" src="./电量.png" alt="">
            <p id="elec-num">电量:100%</p>
            <img id="sun" src="" alt="">
            <p id="now"></p>
            <p id="time"></p>
            <img id="man" src="./3c235f84458df48e57def352432d1f35.gif" alt="">
            <p id="hert-num">80~120</p>
            <img id="hert" src="./面性心率图标.png" alt="">
            <p id="hert-now">92</p>
            <img id="img-high" src="./三角形_上.png" alt="">
            <img id="img-low" src="./三角形.png" alt="">
            <p id="tem-high"></p>
            <p id="tem-low"></p>
            <p id="weather"></p>
            <div id="line-on"></div><!--用transform画线条,给边框进行X或者Y轴的缩小-->
            <div id="line-mid"></div>
            <p id="p"></p>
            <img id="run" src="./步数.png" alt=