javascript canvas时钟模拟器

canvas时钟模拟器，供大家参考，具体内容如下

主要功能

能够显示当前的时间，也能够切换夜晚模式和白天模式

主要代码

h = h > 12 ? h : h - 12 // 下午时间修正

// 如果画布状态很混沌的话多使用ctx.restore()恢复到最初状态而不要强行再用同样的方法矫正状态,比如使用rotate顺时针旋转n度之后，再使用rotate以同样的逆时针角度转回去.

参考代码

 
 
 



 您的浏览器不支持canvas，请升级您的浏览器


 Night mode





 * {
 margin: 0;
 padding: 0;
 }

 body {
 background-color: #fff;
 text-align: center;
 transition: 0.5s;
 }

 #demo {
 margin-top: 140px;
 background-color: white;
 border-radius: 15px;
 }

 .mode {
 font-family: Consolas, serif;
 width: 150px;
 margin: 25px auto;
 padding: 15px 25px;
 border: 2px solid #CCCCCC;
 border-radius: 15px;
 background-color: white;
 user-select: none;
 box-shadow: 1px 1px 2px #aaaaaa;
 transition: 0.5s;
 cursor: pointer;
 }

显示效果：

白天模式：

夜晚模式

切换模式

总结：

其实，没有什么代码做不出的效果，只有你想不到的效果。很多复杂的东西其实，在本质上，会是很多简单的东西的一种整合，只要用心去钻研，一定会有收获！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。