html5 canvas 画钟表例子,参考别人的例子,整理完成,有详细注释
参考:http://www.html5tricks.com/demo/html5-canvas-circle-clock/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="myCanvas" width="400" height="400" style="border:5px solid #888;background-color:#edf;"></canvas> </body> </html>
var c = document.getElementById('myCanvas').getContext('2d'); function clock(){ //清空画布 c.clearRect(0,0,400,400); var data = new Date(); var sec =data.getSeconds(); var min =data.getMinutes(); var hour=data.getHours(); var year=data.getFullYear(); var month=data.getMonth()+1; var day =data.getDate(); //保存当前环境的状态 c.save(); //重新映射画布上的 (0,0) 位置 c.translate(200,200); //旋转当前绘图(逆时针旋转1/4的圆路径) c.rotate(-2*Math.PI/4); //分钟刻度线(画60个刻度线) for(var i=0;i<60;i++){ c.beginPath(); c.strokeStyle = "#f00"; c.lineWidth = 5; c.moveTo(110,0); c.lineTo(120,0); c.stroke(); //每个6deg画一个时钟刻度线(顺时针旋转1/60的圆路径) c.rotate(2*Math.PI/60); c.closePath(); } //时钟刻度线(画12个刻度线) for(var i=0;i<12;i++){ c.beginPath(); c.strokeStyle = "#000"; c.lineWidth = 8; c.moveTo(100,0); c.lineTo(120,0); c.stroke(); //每个30deg画一个时钟刻度线(顺时针旋转1/12的圆路径) c.rotate(2*Math.PI/12); c.closePath(); } c.rotate(-1); //时钟刻度数字(画12个刻度数字) for(var i=0;i<12;i++){ c.beginPath(); c.strokeStyle = "blue"; c.lineWidth = 2 ; c.strokeText(i+1,0,90); //每个30deg画一个时钟刻度线 c.rotate(2*Math.PI/12); c.closePath(); } c.rotate(1); //时间显示 c.rotate(2*Math.PI/4); c.font="30px 宋体"; c.strokeText(year+"-"+month+"-"+day+" "+hour+":"+min+":"+sec,-130,180); c.rotate(-2*Math.PI/4); //外表盘 c.beginPath(); c.strokeStyle = "pink"; c.lineWidth = 12 ; //画圆 c.arc(0,0,135,0,Math.PI*2); c.stroke(); c.closePath(); //画时针 hour = hour>12?hour-12:hour; c.beginPath(); //保存当前环境的状态 c.save(); //顺时针旋转当前时针指向所形成的圆弧路径 c.rotate(2*Math.PI/12*hour+2*Math.PI/12/60*min+2*Math.PI/12/3600*sec); c.strokeStyle = "yellowgreen"; c.lineWidth = 4; c.moveTo(-20,0); c.lineTo(50,0); c.stroke(); //返回之前保存过的路径状态和属性 c.restore(); c.closePath(); //画分针 c.beginPath(); //保存当前环境的状态 c.save(); //顺时针旋转当前分针指向所形成的圆弧路径 c.rotate(2*Math.PI/60*min+2*Math.PI/60/60*sec); c.strokeStyle = "springgreen"; c.lineWidth = 3; c.moveTo(-30,0); c.lineTo(70,0); c.stroke(); //返回之前保存过的路径状态和属性 c.restore(); c.closePath(); //画秒针 c.beginPath(); //保存当前环境的状态 c.save(); //顺时针旋转当前秒针指向所形成的圆弧路径 c.rotate(2*Math.PI/60*sec); c.strokeStyle = "red"; c.lineWidth = 2 ; c.moveTo(-40,0); c.lineTo(120,0); c.stroke(); //返回之前保存过的路径状态和属性 c.restore(); c.closePath(); c.restore(); } clock(); setInterval(clock,1000);
相关推荐
html5 canvas绘制时钟表时间是一款用canvas精灵绘制器绘制的时钟表时间特效。
html5 canvas 开发 3D钟表
网页游戏源码,基于html5+canvas+javascript实现了一个指针式钟表,时间和本地计算机时间同步
html5 canvas绘制时钟表时间效果源码下载 html5 canvas绘制时钟表时间效果源码下载
html5 canvas绘制时钟表时间是一款用canvas精灵绘制器绘制的时钟表时间特效。
使用HTML5的Canvas做的一个钟表小程序,可以作为入门学习!
实现效果: HTML5 Canvas指针时钟表特效,可以放在个人博客上面,这样的一个效果看起来会更加炫酷一点!
Canvas钟表控件,使用方法如下: <!doctype html> <html> <script type="text/javascript" src="Clock.js"></script> <canvas width='500' height='500' id='clock'></canvas> initClock('clock...
关于网页的canvas画布生成时钟的pdf,采用的JavaScript写,可以在网页中生成一个时钟,里面是直接的代码
利用canvas实现web端钟表的展示,同时加强我们对canvas各项属性和方法的印象和运用
html5 canvas圆形时钟代码是一款采用canvas画布实现的本地时钟代码下载。
HTML5 Canvas指针时钟表特效是一款简洁好看的圆形指针时钟特效下载。
HTML5 Canvas指针时钟表特效是一款简洁好看的圆形指针时钟特效下载。
html5圆形的钟表,经测试发现,不兼容IE11,其它低版本IE就更不说了。不过本效果在火狐和chrome下将是不错,打开后即生成一个圆形带指针的钟表样式,并且指针随系统时间一起走动,是学习HTML5的好范例。
使用canvas绘制的实时时钟
jQuery css3实现HTML5动态的网页时钟-圆形的钟表,那些指针的走动动画完全是HTML5生成的动画效果,运行后自动获取Windows时间并定位时钟指针,开始走时,效果超棒。本时钟设计简洁明快。
html 5 canvas 炫丽的时钟倒计时效果