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之end()和pushStack()使用介绍
Feb 07 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
简单实现js浮动框
Dec 13 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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 进程锁定问题分析研究
2009/11/24 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
原生JS轮播图插件
2017/02/09 Javascript
js实现登录与注册界面
2017/11/01 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python读取Android permission文件
2013/11/01 Python
Python httplib模块使用实例
2015/04/11 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
简单谈谈python中的多进程
2016/11/06 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python中tab键是什么意思
2020/06/18 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
毕业自荐信
2013/12/16 职场文书
英语道歉信范文
2014/01/09 职场文书
双创工作实施方案
2014/03/26 职场文书
租房协议书
2014/09/12 职场文书
2014年秘书工作总结
2014/11/25 职场文书
万里长城导游词
2015/01/30 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
nginx静态资源的服务器配置方法
2022/07/07 Servers