使用canvas绘制超炫时钟


Posted in HTML / CSS onDecember 17, 2014

先上效果图:

使用canvas绘制超炫时钟

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas钟表</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
</style>
</head>
<body onload="run()">
<canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字,说明你的浏览器弱爆了!</canvas>
<script>
window.onload=draw;
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.save(); ///////////////////////////////////保存
context.translate(200,200);
var deg=2*Math.PI/12;
//////////////////////////////////////////////////表盘
context.save();
context.beginPath();
for(var i=0;i<13;i++){
var x=Math.sin(i*deg);
var y=-Math.cos(i*deg);
context.lineTo(x*150,y*150);
}
var c=context.createRadialGradient(0,0,0,0,0,130);
c.addColorStop(0,"#22f");
c.addColorStop(1,"#0ef")
context.fillStyle=c;
context.fill();
context.closePath();
context.restore();
//////////////////////////////////////////////////数字
context.save();
context.beginPath();
for(var i=1;i<13;i++){
var x1=Math.sin(i*deg);
var y1=-Math.cos(i*deg);
context.fillStyle="#fff";
context.font="bold 20px Calibri";
context.textAlign='center';
context.textBaseline='middle';
context.fillText(i,x1*120,y1*120);
}
context.closePath();
context.restore();
//////////////////////////////////////////////////大刻度
context.save();
context.beginPath();
for(var i=0;i<12;i++){
var x2=Math.sin(i*deg);
var y2=-Math.cos(i*deg);
context.moveTo(x2*148,y2*148);
context.lineTo(x2*135,y2*135);
}
context.strokeStyle='#fff';
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////////小刻度
context.save();
var deg1=2*Math.PI/60;
context.beginPath();
for(var i=0;i<60;i++){
var x2=Math.sin(i*deg1);
var y2=-Math.cos(i*deg1);
context.moveTo(x2*146,y2*146);
context.lineTo(x2*140,y2*140);
}
context.strokeStyle='#fff';
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();
///////////////////////////////////////////////////文字
context.save();
context.strokeStyle="#fff";
context.font=' 34px sans-serif';
context.textAlign='center';
context.textBaseline='middle';
context.strokeText('canvas',0,65);
context.restore();
/////////////////////////////////////////////////new Date
var time=new Date();
var h=(time.getHours()%12)*2*Math.PI/12;
var m=time.getMinutes()*2*Math.PI/60;
var s=time.getSeconds()*2*Math.PI/60;</p> <p>////////////////////////////////////////////////时针
context.save();
context.rotate( h + m/12 + s/720) ;
context.beginPath();
context.moveTo(0,6);
context.lineTo(0,-85);
context.strokeStyle="#fff";
context.lineWidth=6;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////分针
context.save();
context.rotate( m+s/60 ) ;
context.beginPath();
context.moveTo(0,8);
context.lineTo(0,-105);
context.strokeStyle="#fff";
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
/////////////////////////////////////////////秒针
context.save();
context.rotate( s ) ;
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-120);
context.strokeStyle="#fff";
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();
context.restore();/////////////////////////////栈出
setTimeout(draw, 1000);/////////////////////////////计时器</p> <p>}</p> <p></script>
</body>
</html>
HTML / CSS 相关文章推荐
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
24个canvas基础知识小结
Dec 17 #HTML / CSS
html5使用canvas绘制文字特效
Dec 15 #HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 #HTML / CSS
html5使用canvas绘制一张图片
Dec 15 #HTML / CSS
html5使用canvas画三角形
Dec 15 #HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 #HTML / CSS
html5使用canvas画一条线
Dec 15 #HTML / CSS
You might like
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
javascript函数定义的几种区别小结
2014/01/06 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
地质灾害防治方案
2014/05/14 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
Java使用HttpClient实现文件下载
2022/08/14 Java/Android