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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
js实现简易计算器小功能
Nov 18 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初学入门
2006/11/19 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
vue ssr 指南详读
2018/06/29 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
详解Python的Django框架中的中间件
2015/07/24 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
python统计文章中单词出现次数实例
2020/02/27 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
预备党员表决心书
2014/03/11 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
希特勒的演讲稿
2014/05/23 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL