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实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
javascript如何定义对象数组
Jun 07 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
js实现旋转的星空效果
Nov 01 Javascript
JavaScript实现消消乐的源代码
Jan 12 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
php中对2个数组相加的函数
2011/06/24 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
JavaScript While 循环基础教程
2007/04/05 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python for和else语句趣谈
2019/07/02 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
机械设备与数控技术专业求职信
2014/08/10 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
李强为自己工作观后感
2015/06/11 职场文书
遗失证明范文
2015/06/19 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
AngularJS实现多级下拉框
2022/03/25 Javascript
Python作用域和名称空间的详细介绍
2022/04/13 Python