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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
React快速入门教程
Jan 17 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
vue权限路由实现的方法示例总结
Jul 29 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python编写爬虫小程序
2015/05/14 Python
Python中tell()方法的使用详解
2015/05/24 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
利用python画出折线图
2018/07/26 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
使用python实现kNN分类算法
2019/10/16 Python
Python3实现飞机大战游戏
2020/04/24 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
应届大学生求职信
2013/12/01 职场文书
网站推广策划方案
2014/06/04 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
追悼会家属答谢词
2015/09/29 职场文书
mysql知识点整理
2021/04/05 MySQL