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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 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的引用计数机制
2013/06/14 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
深入解析Python中的urllib2模块
2015/11/13 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python实现可变变量名方法详解
2019/07/01 Python
postman传递当前时间戳实例详解
2019/09/14 Python
python3.8下载及安装步骤详解
2020/01/15 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python与idea的集成的实现
2020/11/20 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
小学生安全演讲稿
2014/04/25 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书