使用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制作3D样式按钮实现代码
Mar 18 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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
smarty section简介与用法分析
2008/10/03 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
深入解析Python中的线程同步方法
2016/06/14 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python os.path模块常用方法实例详解
2018/09/16 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python colormap库的安装和使用详情
2020/10/06 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
英文版区域经理求职信
2013/10/23 职场文书
爱情保证书范文
2014/02/01 职场文书
2014年审计工作总结
2014/11/17 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android