html5电子时表,HTML5 canvas钟表
HTML5 canvas时钟
演示出处:[url]http://www.huiyi8.com/divcss/[/url]
HTML CLOCK
你的浏览器不支持canvas标签,时针显示不出来哦!
//画布背景颜色
var clockBackGroundColor = "#ABCDEF";
//时针颜色
var hourPointColor = "#000";
//时针粗细
var hourPointWidth = 7;
//时针长度
var hourPointLength = 100;
//分针颜色
var minPointColor = "#000";
//分针粗细
var minPointWidth = 5;
//分针长度
var minPointLength = 150;
//秒针颜色
var secPointColor = "#F00";
//秒针粗细
var secPointWidth = 3;
//秒针长度
var secPointLength = 170;
//表盘颜色
var clockPanelColor = "#ABCDEF";
//表盘刻度颜色
var scaleColor = "#000";
//表盘大刻度宽度 3 6 9 12
var scaleBigWidth = 9;
//表盘大刻度的长度
var scaleBigLength = 15;
//表盘小刻度的宽度
var scaleSmallWidth = 5;
//表盘小刻度的长度
var scaleSmallLength = 10;
//圆心颜色
var centerColor = 'red';
//时钟画布
var clock = document.getElementById('clock');
clock.style.background = clockBackGroundColor;
//时针画布的作图环境(画板)
var panel = clock.getContext('2d');
//画线
/**
*画线段
*
*
*/
function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){
//保存传入的画板,相当于每次作画新开一个图层
p.save();
//设置画笔宽度
p.lineWidth = width;
//设置画笔颜色
p.strokeStyle = color;
//新开启作图路径,避免和之前画板上的内容产生干扰
p.beginPath();
p.translate(cX,cY);
//旋转
p.rotate(ran);
//移动画笔到开始位置[url=http://www.huiyi8.com/moban/]html5模版[/url]
p.moveTo(startX,startY);
//移动画笔到结束位置
p.lineTo(endX,endY);
//画线操作
p.stroke();
//关闭作图路径,避免和之后在画板上绘制的内容产生干扰
p.closePath();
//在传入的画板对象上覆盖图层
p.restore();
}
/**
*画水平线
*/
function drowHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){
drowLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY);
}
/**
*画圈圈
*/
function drowCircle(p,width,color,centreX,centreY,r){
p.save();
//设置画笔宽度
p.lineWidth = width;
//设置画笔颜色
p.strokeStyle = color;
//新开启作图路径,避免和之前画板上的内容产生干扰
p.beginPath();
//画圈圈
p.arc(centreX,centreY,r,0,360,false);
//画线操作
p.stroke();
//关闭作图路径,避免和之后在画板上绘制的内容产生干扰
p.closePath();
//在传入的画板对象上覆盖图层
p.restore();
}
function drowPoint(p,width,color,centreX,centreY,r){
p.save();
//设置画笔宽度
p.lineWidth = width;
//设置画笔颜色
p.fillStyle = color;
//新开启作图路径,避免和之前画板上的内容产生干扰
p.beginPath();
//画圈圈
p.arc(centreX,centreY,r,0,360,false);
//画线操作
p.fill();
//关闭作图路径,避免和之后在画板上绘制的内容产生干扰
p.closePath();
//在传入的画板对象上覆盖图层
p.restore();
}
function drowScales(p){
//画小刻度
for(var i = 0;i < 60;i++){
drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);
}
//画大刻度
for(var i = 0;i < 12;i++){
drowHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250);
//可以添加数字刻度
}
}
function drowHourPoint(p,hour){
drowHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250);
}
function drowMinPoint(p,min){
drowHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250);
}
function drowSecPoint(p,sec){
drowHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250);
}
function drowClock(){
panel.clearRect(0,0,500,500);
panel.fillText("联系作者 [email]Kerbores@gmail.com[/email]",10,20);
panel.fillText("http://kipy.xicp.net",10,40);
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes();
var hour = date.getHours() + min/60;
drowCircle(panel,7,'blue',250,250,200);
drowScales(panel);
drowHourPoint(panel,hour);
drowMinPoint(panel,min);
drowSecPoint(panel,sec);
drowPoint(panel,1,centerColor,250,250,7);
//drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);
}
//drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);
drowClock();
setInterval(drowClock,1000);
function save(){
var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream");
location.href=image;
}
[/font]
html5电子时表,HTML5 canvas钟表相关推荐
- html5语义元素表,HTML5的结构和语义(3):语义性的块级元素
HTML5的结构和语义(3):语义性的块级元素 互联网 发布时间:2008-10-17 18:55:35 作者:佚名 我要评论 HTML5还增加了一些纯语义性的块级元素: aside fi ...
- html5外置样式表,HTML5移动端通用css详解
HTML5移动端通用css 下面是common.css内容 /*css初始化*/ /*清除内外边距*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd, ...
- html5游戏测表,HTML5游戏 BrowserQuest 安装和测试运行
前提条件 1.安装 node.js ,下载地址为 http://nodejs.org/ 并通过npm install [MODULE_NAME] 安装如下组件,如npm install undersc ...
- HTML5新增的表单类型
HTML5新增的表单类型 整理时间:2017-10-4 整理人:info#haixia.net(将#替换成@,来信必复) 序号 属性名称 描述 1 number 仅限数值型数据,可设置区间范围与步长增 ...
- 利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟 利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习 效果图: 在线效果预览 思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...
- html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
- html5是什么材料,HTML_HTML5 Canvas标签使用收录, 一、基本概念
什么是Canva - phpStudy...
HTML5 Canvas标签使用收录 一.基本概念 什么是Canvas 是一个新的 HTML 元素,这个元素在 HTML5 中被定义.这个元素通常可以被用来在 HTML 页面中通过 JavaScri ...
- html5密码确认属性,HTML5表单及其验证【html自带属性验证】
HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架, ...
- HTML5 JavaScript CSS 表单实现购物优惠打折
HTML5 JavaScript CSS 表单实现购物优惠打折 文章目录 HTML5 JavaScript CSS 表单实现购物优惠打折 前言 一.CSS代码如下,通过外链接实现交互. 二.HTML5 ...
- HTML5中将中文表单验证默认提示语句改为英文!
js代码: function checkEmail(){var email=document.getElementById("eject_email");if(email.valu ...
最新文章
- Redis的内存淘汰策略问题
- python输出结果空格分割_用Python编写固定宽度,以空格分隔的CSV输出
- 三菱的触摸屏usb驱动_如何实现一个TK6071IP的触摸屏驱动两个三菱FX1S-30MT的PLC?...
- 怎样在WIN7系统下安装IIS和配置ASP
- 深度解密 Go 语言之基于信号的抢占式调度
- 【Oracle经典】132个oracle热门精品资料——下载目录
- 影响宝宝脾胃健康的3个“真凶”,难怪孩子脾胃总是调不好!
- python学习----简易版非诚勿扰
- DH密钥交换在实践中的安全问题
- 传詹克团、吴忌寒将卸任比特大陆CEO一职 1
- CNN 卷积神经网络-- 残差计算
- 微软认证全国考试中心一览表
- 南宁师范大学计算机考研资料汇总
- C# 实现打印机队列监控Win32_PrintJob,Win32_Printer
- 静态代码分析工具清单:开源篇
- html常见的错误,常见的6种HTML5错误用法
- 给konva加个刻度尺
- 两相步进电机和四相步进电机的不同点?
- WINDOWS文本编辑器丨EmEditor功能简介
- 查询库中所有的表名及数据量
热门文章
- ie 远程控制计算机,通过IE浏览器连接“远程桌面”方法详解
- 端端正正做人,踏踏实实做事
- 机器学习_深度学习毕设题目汇总——漫画
- Axure8有效注册码
- numpy_flatten函数
- 原相机怎么设置水印_原来手机拍照也可以添加文字、水印、超实用,我怎么没有早点发现...
- android共享局域网打印,Android 浅谈同一局域网下使用WiFi连接打印机
- lodop指定打印机打印_lodop和c-lodop临时默认打印机同一任务测试
- 自制BSL编程MSP430单片机
- 重装电脑系统前,如何设置BIOS ?