javascript绘制简单钟表效果


Posted in Javascript onApril 07, 2020

本文给大家分享一个canvas的时钟绘制,供大家参考,具体内容如下

javascript绘制简单钟表效果

复制可直接使用

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 h1 {
 text-align: center;
 }
 
 div {
 width: 400px;
 height: 400px;
 margin: 10px auto;
 padding: 0;
 }
 </style>
 </head>

 <body>
 <h1>手绘时钟</h1>
 <hr />
 <div>
 <canvas id="c1" width="400px" height="400px">
 
 </canvas>
 </div>
 <script type="text/javascript">
 var clock = document.getElementById("c1").getContext("2d");
 
// var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布
 
 function play() {
 clock.clearRect(0, 0, 400, 400);
 clock.save();
 clock.translate(200, 200); //把画布中心转移到canvas中间
 biaopan();
 run();
 clock.restore();
 }
 setInterval(function() {
 play();
 }, 1000);

 function biaopan() {
 //绘制表盘
 clock.strokeStyle = " #9932CC";
 clock.lineWidth = 5;
 clock.beginPath();
 clock.arc(0, 0, 195, 0, 2 * Math.PI);
 clock.stroke();
 
 //刻度(小时)
 clock.strokeStyle = "#9932CC";
 clock.lineWidth = 5;
 for(var i = 0; i < 12; i++) {
  clock.beginPath();
  clock.moveTo(0, -190);
  clock.lineTo(0, -170);
  clock.stroke();
  clock.rotate(2 * Math.PI / 12);
 }
 //刻度(分钟)
 clock.strokeStyle = "#9932CC";
 clock.lineWidth = 3;
 for(var i = 0; i < 60; i++) {
  clock.beginPath();
  clock.moveTo(0, -190);
  clock.lineTo(0, -180);
  clock.stroke();
  clock.rotate(2 * Math.PI / 60);
 }
 //绘制文字
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 clock.fillStyle = "#6495ED";
 clock.font = "20px 微软雅黑"
 for(var i = 1; i < 13; i++) {
  clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
 }
 
 }

 function run() {
 var date = new Date();
 var h = date.getHours();
 var m = date.getMinutes();
 var s = date.getSeconds();
// if(h > 12) {
//  h = h - 12;
// }
 //日期
 var week = date.getDay();
 var month = date.getMonth() + 1;
 var day = date.getDate();
 switch (week){
  case 1: week = "星期一";
  break;
  case 2: week = "星期二";
  break;
  case 3: week = "星期三";
  break;
  case 4: week = "星期四";
  break;
  case 5: week = "星期五";
  break;
  case 6: week = "星期六";
  break;
  default: week = "星期天";
  break;
 }
 clock.save();
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 clock.fillStyle = "black";
 clock.font = "16px"
 clock.fillText(week,-2,-118);
 clock.fillText(month+" 月",-90,2);
 clock.fillText(day+" 号",90,0);
 clock.stroke();
 clock.restore();

 //时针
 //分针60格 分针5格 
 clock.save();
 clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
 clock.strokeStyle = "black";
 clock.lineWidth = 7;
 clock.beginPath();
 clock.moveTo(0, 0);
 clock.lineTo(0, -80);
 clock.lineCap = "round";
 clock.stroke();
 clock.restore();
 //分针
 //秒针60格 分针一格
 clock.save();
 clock.beginPath();
 clock.strokeStyle = "#D2691E";
 clock.lineWidth = 5;
 clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
 clock.moveTo(0, 0);
 clock.lineTo(0, -110);
 clock.lineCap = "round";
 clock.stroke();
 clock.restore();
 //秒针
 clock.strokeStyle = "red";
 clock.rotate(2 * Math.PI / 60 * s);
 clock.lineWidth = 4;
 clock.beginPath();
 clock.moveTo(0, 0);
 clock.lineTo(0, -120);
 clock.lineCap = "round";
 clock.stroke();
 //中心
 clock.fillStyle = " #CCFFFF";
 clock.lineWidth = 5;
 clock.beginPath();
 clock.arc(0, 0, 10, 0, 2 * Math.PI);
 clock.fill();
 clock.strokeStyle = "cadetblue";
 clock.stroke();
 
 }
 </script>
 </body>

</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
浅谈javascript的调试
Jan 28 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 #Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
js实现登录时记住密码的方法分析
Apr 05 #Javascript
Vue插件之滑动验证码用法详解
Apr 05 #Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 #Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
You might like
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python里dict变成list实例方法
2019/06/26 Python
pymysql的简单封装代码实例
2020/01/08 Python
python如何调用字典的key
2020/05/25 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
致长跑运动员广播稿
2014/01/31 职场文书
2015年行政部工作总结
2015/04/28 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python