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 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
vue的webcamjs集成方式
Nov 16 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
php中随机显示图片的函数代码
2011/06/23 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
女生抽烟检讨书
2014/10/05 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
七一活动主持词
2015/06/29 职场文书
清洁工工作总结
2015/08/11 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
思想品德课教学反思
2016/02/24 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python