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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
javascript闭包入门示例
Apr 30 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
基于对象合并功能的实现示例
Oct 10 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 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
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python读写Excel文件方法介绍
2014/11/22 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python difflib模块示例讲解
2017/09/13 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
学院书画协会部门岗位职责
2013/12/01 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书