Canvas Clock

这两天在看html5的canvas,实现了上面那个东西

需要注意的地方：

1.canvas的sava()和restore()理解和使用

2.canvas的translate scale rotate ..的使用，每个变化都应该清楚圆心和角度..看：http://blog.sina.com.cn/s/blog_8fab526c01015tqs.html

3.自定义旋转transform方法，实现数字的fillText

View Code

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Canvas Clock.</title><script src="jquery-1.7.1.min.js"></script>
</head>
<style type="text/css">#canvasPanel{margin:0 auto;}#canvas{display: block;}
</style>
<body>    <div id="time"><span>2013-05-11</span></div><div id="canvasPanel"><canvas id="canvas" width="300" height="300" style="border:1px solid #ccc;"></canvas></div><script type="text/javascript">window.onload = function(){clock();var timeInterval = setInterval(clock,1000);};function clock(){var now = new Date();var weekday={0:'星期日',1:'星期一',2:'星期二',3:'星期三',4:'星期四',5:'星期五',6:'星期六'};var sec = now.getSeconds();var min = now.getMinutes();var hr  = now.getHours();hr = hr>=12 ? hr-12:hr;ctx = document.getElementById('canvas').getContext("2d");ctx.save();ctx.clearRect(0,0,300,300);ctx.translate(150,150);ctx.scale(0.4,0.4);ctx.rotate(-Math.PI/2);
ctx.strokeStyle = "black";ctx.lineWidth = 8;ctx.lineCap = "round";// 时间刻度
                ctx.save(); var x = 0, y = 0,angle = Math.PI/30;ctx.rotate(Math.PI/2);    //function transform ??function transform(ctx,x,y,angle,b){if(b){ctx.transform(Math.cos(angle), Math.sin(angle),-Math.sin(angle), Math.cos(angle),x*(1-Math.cos(angle)) + x*Math.sin(angle),y*(1-Math.cos(angle)) - y*Math.sin(angle));}}for(var i=0;i<60;i++){if(i%5 == 0){ctx.font = "26px Arial";ctx.fillText(i/5 == 0 ? 12 : i/5,x-15,y-200);}transform(ctx,x,y,angle,true); }ctx.restore();ctx.save();ctx.beginPath();for(var i=0;i<12;i++){ctx.rotate(Math.PI/6);ctx.moveTo(250,0);ctx.lineTo(270,0);}ctx.stroke();ctx.restore();ctx.save();ctx.lineWidth = 5;ctx.beginPath();for(var i=0;i<60;i++){if(i%5!=0){ctx.moveTo(266,0);ctx.lineTo(270,0);}ctx.rotate(Math.PI/30);
                    }    ctx.stroke();ctx.restore();//draw the hour line
                ctx.save();ctx.rotate((Math.PI/6)*hr+(Math.PI/360)*min+(Math.PI/21600)*sec);
                    ctx.beginPath();ctx.moveTo(-20,0);ctx.lineTo(150,0);ctx.stroke();ctx.restore();//draw the min line
                ctx.save();ctx.rotate((Math.PI/30)*hr+(Math.PI/1800)*min);ctx.strokeStyle = "#fd4000";ctx.fillStyle = "#fd4000";ctx.lineWidth = 6;ctx.beginPath();ctx.moveTo(-28,0);ctx.lineTo(200,0);ctx.stroke();ctx.restore();//draw the sec line
                ctx.save();ctx.rotate((Math.PI/30)*sec);ctx.strokeStyle = "#D40000";ctx.fillStyle = "#d40000";ctx.lineWidth = 6;ctx.beginPath();ctx.moveTo(-36,0);ctx.lineTo(160,0);ctx.stroke();ctx.restore();//draw the circle
                ctx.save();ctx.lineWidth = 4;ctx.strokeStyle = "325fa2"ctx.beginPath();ctx.arc(0,0,300,0,Math.PI*2,true);ctx.stroke();ctx.restore();//draw the middle circle
                ctx.save();ctx.lineWidth = 4;ctx.strokeStyle = "325fa2";ctx.beginPath();ctx.arc(0,0,7,0,Math.PI*2,true);ctx.stroke();ctx.restore();//show time/*ctx.rotate(Math.PI/2);ctx.lineWidth = 2;ctx.fillStyle = "red";hour = now.getHours();var str = hour > 10 ? hour : ("0"+hour)+":"+(min > 10 ? min:("0"+min));ctx.font = "18px";ctx.fillText(str,150,250);ctx.lineWidth = 1;  ctx.fillText("Lgm ZJ", 150, 270); */ctx.restore();var dateString=now.getFullYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日 "+weekday[now.getDay()]+" h:"+now.getHours()+" m:"+min+" s:"+sec;$("#time span").html(dateString);}</script>
</body></html>

转载于:https://www.cnblogs.com/lgmcolin/archive/2013/05/11/3073373.html

Canvas Clock相关推荐

html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
【飞秋】基于Html5的Canvas实现的Clocks (钟表)
Canvas是Html5中非常重要的Feature 之一,究竟Canvas的未来会怎么样? 各大巨头有着不同的想法,微软的IE9会全面支持Canvas, Safari Chrome FireFox O ...
Canvas画钟 js
用Canvas模拟了webQQ里头的那个钟.下图左侧是webQQ的原版,右侧是画出来的.效果预览画的过程中都还比较顺利,只是最里边的那个小圆顶部有一点点小渐变,花了不少功夫 . 用得比较多的是旋转部 ...
canvas 时钟动画
平时在公司不忙的时候,就喜欢写一些小效果什么的,一来复习复习,二来可以发现一些问题. 今天在群里看别人发了一手表的图片,卧槽...妥妥的工作好多年的节奏,后来想想还是做好自己的事情算了,想那多干啥,就 ...
Android_2D绘图的学习Paint,Canvas(三)
前言上一节,学习了Paint的高级用法后,这一节我们将canvas的用法.主要涉及到canvas的绘制坐标变换translate,rotate.还没看过上一节的请点击这里:Android_2D绘图的 ...
15款很有用的jquery时钟插件和教程
jQuery是现在使用最广泛的JS库.在你的网站里里可以使用着15款jQuery时钟插件.对于网站设计和开发人员来说,这是一个好消息.使用它们能使你的网站更美和更吸引人. 1.JDIGICLOCK 它 ...
canvas绘制闹钟-方法1
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html><head><meta charset= ...
使用HTML5的canvas做一个会动的时钟
这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害. HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的 ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...

Canvas Clock

Canvas Clock相关推荐

最新文章

热门文章