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 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
JavaScript 乱码问题
Aug 06 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
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
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
几种tab切换详解
2017/02/03 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
详解Angular2 之 结构型指令
2017/06/21 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
python 写一个水果忍者游戏
2021/01/13 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
企业党员个人自我评价
2014/09/20 职场文书
英语导游欢迎词
2015/09/30 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript