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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
You might like
深入掌握include_once与require_once的区别
2013/06/17 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python 同时运行多个程序的实例
2019/01/07 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python制作填词游戏步骤详解
2019/05/05 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
关于numpy数组轴的使用详解
2019/12/05 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
python如何查看安装了的模块
2020/06/23 Python
模具专业毕业生自荐书范文
2014/02/19 职场文书
化学教育专业自荐信
2014/07/04 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
庭外和解协议书
2016/03/23 职场文书