JS+H5 Canvas实现时钟效果
时间:2018-07-20
这篇文章主要为大家详细介绍了JS+H5 Canvas实现时钟效果,利用JavaScript和Canvas实现简单时钟效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下
效果图:
先看html代码:
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head> <body> <canvas id = "canvas"></canvas> </body> </html>
JavaScript代码:
var canvas,context; function draw(){//定义划时钟的方法 var data = new Date(); var hHoure = data.getHours(); var mMin = data.getMinutes(); var sSec = data.getSeconds(); var hValue = (hHoure*30+mMin/2-90)*Math.PI/180; var mValue = (mMin*6-90)*Math.PI/180; var sValue = (sSec*6 -90)*Math.PI/180; var x = 200,y = 200,r = 150; context.clearRect(0,0,canvas.width,canvas.height); context.moveTo(x,y); context.arc(x,y,r,0,6*Math.PI/180,false); // context.beginPath(); context.lineWidth = 1; for(var i = 0;i<60;i++){ context.moveTo(x,y); context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } context.closePath(); context.stroke(); // context.beginPath(); context.fillStyle = "white"; context.moveTo(x,y); context.arc(x,y,r/1.1,-0,2*Math.PI,false); context.closePath(); context.fill(); // context.beginPath(); context.lineWidth = 3; for(var i = 0;i<12;i++){ context.moveTo(x,y); context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false); } context.closePath(); context.stroke(); // context.beginPath(); context.fillStyle = "white"; context.moveTo(x,y); context.arc(x,y,r/1.12,0,2*Math.PI,false); context.closePath(); context.fill(); context.beginPath(); context.fillStyle = "black"; context.moveTo(x,y); context.arc(x,y,r/30,0,2*Math.PI,false); context.fill(); // context.beginPath(); context.lineWidth = 5; context.moveTo(x,y); context.arc(x,y,r/2.5,hValue,hValue,false); context.stroke(); // context.beginPath(); context.lineWidth = 3; context.moveTo(x,y); context.arc(x,y,r/2,mValue,mValue,false); context.stroke(); // context.beginPath(); context.lineWidth = 2; context.moveTo(x,y); context.arc(x,y,r/1.6,sValue,sValue,false); context.stroke(); } window.onload = function(){ canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); canvas.height = 500; canvas.width = 500; setInterval(draw,1000); draw(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 数组-在Shell脚本中的基本使用介绍
- .Net Core下通过Proxy 模式 使用 WCF
- javascript中function调用时的参数检测常用办法
- squid代理http和https方式上网的操作记录
- kvm虚拟化管理平台WebVirtMgr部署-完整记录(3)
- 域名hiku.com曾百万价格被交易,目前被加拿大大麻公司收购
- Linux系统下的用户密码设定梳理
- Silverlight中的序列化
- 第四次工业革命
- 每周.NET前沿技术文章摘要(2017-06-07)
- 再谈Silverlight中的对象序列化/反序列化
- jQuery打造智能提示插件
- 每周.NET前沿技术文章摘要(2017-05-17)
- 每周.NET前沿技术文章摘要(2017-05-24)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊claudb的exportRDB
- Jenkins_流水线语法_001
- Jenkins_流水线语法_002
- Kubernetes组件
- Python第二十三课:递归斐波那契
- python递归函数
- Mysql 游标
- python小工具,通讯录小程序
- Python3基础:集合的使用
- 删除处于Terminating状态的namespace
- elasticSearch学习(七)
- Flutter透明度渐变动画FadeTransition实现透明度渐变动画效果
- iOS NSTimer不走的问题
- 我对python中的super()机制的一点理解
- 【Python】使用Pygame做一个Flappy bird小游戏(五)