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 相关文章推荐
javascript 二进制运算技巧解析
Nov 27 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
浅谈TypeScript 索引签名的理解
Oct 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 模板高级篇总结
2006/12/21 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
微信小程序如何获取用户收货地址
2018/11/27 Javascript
小程序实现搜索框
2020/06/19 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
详解python UDP 编程
2020/08/24 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
出生公证书
2015/01/23 职场文书
学校端午节活动总结
2015/02/11 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle