首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript canvas时钟模拟器

Posted in Javascript onJuly 13, 2020

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

主要功能

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

主要代码

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

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

参考代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>钟表模拟器</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="demo" width="1000px" height="600px">
 您的浏览器不支持canvas，请升级您的浏览器
</canvas>
<div class="mode">
 Night mode
</div>
<div id="fullscreen"></div>
</body>
<script>
 /*
 *
 * 模拟钟表
 *
 * */

 window.onload = () => {

 // 浏览器禁止在你刚刚进入一个页面的时候就变成全屏，这是为了用户的安全和体验
 // let elem = document.querySelector('#fullscreen')
 //
 // let event = new Event('myEvent')
 //
 // elem.addEventListener('myEvent', function (e) {
 // console.log('ok')
 // setTimeout(() => {
 //  let element = document.documentElement
 //  if (element.requestFullscreen) {
 //  element.requestFullscreen()
 //  } else if (element.msRequestFullscreen) {
 //  element.msRequestFullscreen()
 //  } else if (element.mozRequestFullScreen) {
 //  element.mozRequestFullScreen()
 //  } else if (element.webkitRequestFullscreen) {
 //  element.webkitRequestFullscreen()
 //  }
 // }, 1000)
 //
 // }, false)
 //
 // elem.dispatchEvent(event)
 
 // 切换夜晚模式和白天模式
 let mode = document.getElementsByClassName('mode')
 let nightMode = false
 mode[0].onclick = () => {
  nightMode = !nightMode
  document.body.style.backgroundColor = nightMode === false ? '#fff' : '#000'
  mode[0].innerHTML = nightMode === false ? 'Night mode' : 'exit'
  if (nightMode) {
  mode[0].style.color = '#000'
  mode[0].style.backgroundColor = '#fff'
  } else {
  mode[0].style.color = '#fff'
  mode[0].style.backgroundColor = '#000'
  }
 }

 // 鼠标进入变色（可进一步简洁）
 mode[0].onmouseover = () => {
  if (nightMode) {
  mode[0].style.color = '#000'
  mode[0].style.backgroundColor = '#fff'
  } else {
  mode[0].style.color = '#fff'
  mode[0].style.backgroundColor = '#000'
  }
 }

 // 鼠标移出变色（可进一步简洁）
 mode[0].onmouseout = () => {
  if (nightMode) {
  mode[0].style.color = '#fff'
  mode[0].style.backgroundColor = '#000'
  } else {
  mode[0].style.color = '#000'
  mode[0].style.backgroundColor = '#fff'
  }
 }

 doHidden()
 //
 // 在一秒之后把光标去掉
 function doHidden() {
  let time = ''
  document.body.onmousemove = () => {
  document.body.style.cursor = 'default' // 恢复普通的光标
  console.log('ok')
  if (time) {
   clearTimeout(time)
  }
  // 一秒后鼠标不动自动使光标消失
  time = setTimeout(() => {
   console.log('ok2')
   document.body.style.cursor = nightMode === false ? `url('./imgs/hidden-box2.ani'), default` : `url('./imgs/hidden-box.ani'), default` // 这里的光标文件自己定义，最好是透明的空文件，找网上的图标文件转换器转换为ani文件
  }, 1000)
  }
 }

 let canvas = document.getElementById('demo')
 let ctx = canvas.getContext('2d')
 // 为了绘制时针，把坐标轴原点转移到画布中心
 ctx.translate(500, 300)
 
 // 开始正式绘制第一次
 drew()

 // 持续更新画布
 setInterval(() => {
  drew() 
 }, 500)

 // 核心方法
 function drew() {
  // 刷新画布
  ctx.fillStyle = nightMode === false ? '#fff' : '#000'
  ctx.fillRect(-500, -300, 1000, 600)
  
  // 时钟的大框框
  ctx.save()
  ctx.lineWidth = 6
  ctx.strokeStyle = '#FFD034'
  ctx.lineCap = 'round' // 笔画尖端为圆形
  ctx.rotate(-90 * Math.PI / 180) // 十二点钟方向
  ctx.beginPath()
  ctx.arc(0, 0, 240, 0, 360 * Math.PI / 180)
  ctx.stroke()

  // 时针的刻度
  ctx.save()
  ctx.lineWidth = 10
  ctx.strokeStyle = nightMode === true ? '#fff' : '#000'
  for (let i = 0; i <= 11; i++) {
  ctx.beginPath()
  ctx.moveTo(200, 0)
  ctx.lineTo(222, 0)
  ctx.stroke()
  ctx.rotate(30 * Math.PI / 180)
  }
  ctx.restore()

  // 分针的刻度
  ctx.save()
  ctx.lineWidth = 4
  ctx.strokeStyle = '#9B71EA'
  for (let i = 0; i < 60; i++) {
  if (i % 5 === 0) {
   ctx.rotate(6 * Math.PI / 180)
  } else {
   ctx.beginPath()
   ctx.moveTo(205, 0)
   ctx.lineTo(222, 0)
   ctx.stroke()
   ctx.rotate(6 * Math.PI / 180)
  }
  }
  ctx.restore()

  // 获取时间，正式开始绘制
  let date = new Date()
  let s = date.getSeconds()
  let m = date.getMinutes() + s / 60
  let h = date.getHours() + m / 60
  h = h > 12 ? h : h - 12 // 下午时间修正
  // 画时针
  ctx.save()
  ctx.lineWidth = 18
  ctx.strokeStyle = '#91FF99'
  ctx.rotate(30 * h * Math.PI / 180) // 顺时针旋转的
  ctx.beginPath()
  ctx.moveTo(-20, 0)
  ctx.lineTo(100, 0)
  ctx.stroke()
  ctx.restore()
  // 画分针
  ctx.save()
  ctx.lineWidth = 12
  ctx.strokeStyle = '#D291FF'
  ctx.rotate(6 * m * Math.PI / 180) // 顺时针旋转的
  ctx.beginPath()
  ctx.moveTo(-35, 0)
  ctx.lineTo(138, 0)
  ctx.stroke()
  ctx.restore()
  // 画秒针
  ctx.save()
  ctx.lineWidth = 8
  ctx.strokeStyle = '#FF8465'
  ctx.rotate(6 * s * Math.PI / 180) // 顺时针旋转的
  ctx.beginPath()
  ctx.moveTo(-55, 0)
  ctx.lineTo(115, 0)
  ctx.stroke()
  // 给秒针添加花样
  ctx.beginPath()
  ctx.arc(130, 0, 15, 0, 360 * Math.PI / 180)
  ctx.stroke()
  ctx.beginPath()
  ctx.moveTo(145, 0)
  ctx.lineTo(178, 0)
  ctx.stroke()
  
  // 最后给钟添加最中心的一个`固定器`
  ctx.beginPath()
  ctx.arc(0, 0, 15, 0, 360 * Math.PI / 180)
  ctx.fillStyle = '#FF8465'
  ctx.fill()
  ctx.restore()
  ctx.restore() // 回到最初最初最初的状态（主要是把为了画时针而把画布旋转的角度矫正回去）
 }
 }
</script>
<style>
 * {
 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;
 }

</style>
</html>

显示效果：

白天模式：

javascript canvas时钟模拟器

夜晚模式

javascript canvas时钟模拟器

切换模式

javascript canvas时钟模拟器

总结：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript canvas时钟模拟器

- Author -

kaiqisan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 #Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 #Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 #Javascript
Js on及addEventListener原理用法区别解析
Jul 11 #Javascript
JS call()及apply()方法使用实例汇总
Jul 11 #Javascript
JS如何定义用字符串拼接的变量
Jul 11 #Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 #Javascript
ICF-903L(1) frg-100(1) 74HC4066(1) FS1016(1) 根德5570(1) BCLer(1) YB-230(1) AN-LP1(1) YAESU(1) 239军机(1)
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP 第一节 php简介
2012/04/28 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP crc32()函数讲解
2019/02/14 PHP
YII框架http缓存操作示例
2019/04/29 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
node.js入门教程
2014/06/01 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python 实现list或string按指定分段
2019/12/25 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python 中的命名空间，你真的了解吗？
2020/08/19 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
烈士陵园扫墓感想
2015/08/07 职场文书