使用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制作方法案例
Aug 14 HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 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中日期加减法运算实现代码
2011/12/08 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
js打造数组转json函数
2015/01/14 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
js图片上传的封装代码
2017/08/01 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
three.js 入门案例详解
2018/01/23 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python threading多线程编程实例
2014/09/18 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
浅谈python写入大量文件的问题
2018/11/09 Python
tensorflow如何批量读取图片
2019/08/29 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
SQL数据库笔试题
2016/03/08 面试题
linux面试题参考答案(5)
2016/11/05 面试题
如何定义一个可复用的服务
2014/09/30 面试题
后勤部经理岗位职责
2014/02/23 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
室内趣味活动方案
2014/08/24 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL