JavaScript Canvas编写炫彩的网页时钟


Posted in Javascript onOctober 16, 2019

本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下

只是利用了Canvas制作的。

示意图如下:

JavaScript Canvas编写炫彩的网页时钟

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" />
 <title> 网页时钟 </title>
</head>
<body>
 <h2> Web时钟 </h2>
 <canvas id = "hello" width = "400" height = "400"
 style = "border:1px solid black"> </canvas>
 <script languagetype = "text/javascript">
 var myCavas = document.getElementById('hello');
 var c = myCavas.getContext('2d');
 function clock() {
  c.clearRect(0, 0, 400, 400);
  //获取当前时间
  var data = new Date();
  //获取秒
  var sec = data.getSeconds();
  //获取分钟
  var min = data.getMinutes();
  //获取小时
  var hour = data.getHours();
  c.save();
  c.translate(200, 200);
  c.rotate(-Math.PI/2);
  //分针刻度线
  for (var i = 0; i < 60; i++) { //画60个刻度线
  c.beginPath();
  c.strokeStyle = "yellowgreen";
  c.lineWidth = 5;
  c.moveTo(117, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg画一个分钟刻度线
  c.rotate(Math.PI/30);
  c.closePath();
  }
  //时钟刻度线
  for (var i = 0; i < 12; i++) { //画60个刻度线
  c.beginPath();
  c.strokeStyle = "green";
  c.lineWidth = 8;
  c.moveTo(100, 0);
  c.lineTo(120, 0);
  c.stroke();
  //每6deg画一个分钟刻度线
  c.rotate(Math.PI/6);
  c.closePath();
  }
  //外表盘
  c.beginPath();
  c.strokeStyle = "pink";
  c.arc(0, 0, 145, 0, Math.PI*2);
  c.lineWidth = 12;
  c.stroke();
  c.closePath();
  //画时针
  hour = hour > 12 ? hour-12 : hour;
  //console.log(hour);
  c.beginPath();
  c.save();
  //设置旋转角度,参数是弧度,角度0-360 弧度角度*Math.PI/180
  c.rotate(Math.PI/6*hour + Math.PI/6*min/60 + Math.PI/6*sec/3600);
  c.strokeStyle = "yellowgreen";
  c.lineWidth = 4;
  c.moveTo(-20, 0);
  c.lineTo(50, 0);
  c.stroke();
  c.restore();
  c.closePath();
  //画分针
  //console.log(min);
  c.beginPath();
  c.save();
  c.rotate(Math.PI/30*min + Math.PI/30*sec/60);
  c.strokeStyle = "springgreen";
  c.lineWidth = 3;
  c.moveTo(-30, 0);
  c.lineTo(70, 0);
  c.stroke();
  c.restore();
  c.closePath();
  //画秒针
  c.beginPath();
  c.save();
  c.rotate(Math.PI/30*sec);
  c.strokeStyle = "red";
  c.lineWidth = 2;
  c.moveTo(-40, 0);
  c.lineTo(120, 0);
  c.stroke();
  c.restore();
  c.closePath();
  c.restore();
 }
 clock();
 setInterval(clock, 1000);
 </script>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
js事件(Event)知识整理
Oct 11 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
微信小程序如何实现五星评价功能
Oct 15 #Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 #Javascript
You might like
PHP脚本中include文件出错解决方法
2008/11/20 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python如何生成网页验证码
2018/07/28 Python
python算法题 链表反转详解
2019/07/02 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
美发活动策划书
2014/01/14 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
社区活动总结范文
2015/05/07 职场文书
升学宴学生致辞
2015/07/27 职场文书