使用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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
html实现弹窗的实例
Jun 09 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
基于vue的换肤功能的示例代码
2017/10/10 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Python 创建守护进程的示例
2020/09/29 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
交通专业个人自荐信格式
2013/09/23 职场文书
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
公司承诺书范文
2014/05/19 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server