html5 canvas实现圆形时钟代码分享


Posted in HTML / CSS onDecember 25, 2013
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CLOCK</title>
</head>
<body>
<canvas width="500" height="500" id="clock">
你的浏览器不支持canvas标签,时针显示不出来哦!
</canvas>

<script type="text/javascript">
//画布背景颜色
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);
//移动画笔到开始位置
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("",10,20);
panel.fillText("<a href="https://3water.com",10,40">https://3water.com",10,40</a>);
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;
}
</script>
</body>
</html>

HTML / CSS 相关文章推荐
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 #HTML / CSS
html5 自定义播放器核心代码
Dec 20 #HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 #HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 #HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 #HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 #HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 #HTML / CSS
You might like
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python的argparse库使用详解
2018/10/09 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
2014年护士工作总结范文
2014/11/11 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
社区节水倡议书
2015/04/29 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python