html5 canvas时钟
基础知识点:
canvas标签只是图形容器,您必须使用脚本来绘制图形。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。
getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
fillRect(l,t,w,h):默认颜色是黑色
strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
beginPath():定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。
closePath():结束绘制路径(将起点与终点进行连接)
arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径radius穿过(x1,y1)。
lineTo(x,y):从一点开始绘制一条直线,到(x,y)为止。
moveTo(x,y):将绘图游标移动到(x,y),不画线。
font:表示文本样式、大小及字体,用css中指定字体的格式来指定,例如"bold 10px Arial"。
textAlign:表示文本对齐方法。可能的值有"start"、"end"、"left"、"right"和"center"。建议使用"start"和"end",不要使用“left”和“right”,因为前两者的意思更稳妥,能同时适合从左到右和从右到左
显示(阅读)的语言。
textBaseline:表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、"ideographic"和“bottom”。
fillText(),strokeText():这两个方法都可以接收4个参数:要绘制的文本字符串、x坐标、y坐标和和可选的最大像素宽度,文本最大像素宽度(尚未得到所有浏览器的支持,最早支持他的是firefox4)
绘制圆形
arc( x,y,半径,起始弧度,结束弧度,旋转方向,fasle)
x,y:起始位置
弧度与角度的关系:弧度=角度*Math.PI/180 2*Math.PI代表360度的弧度
旋转方向:顺时针(默认:false,逆时针:true)
注意点:
1.注意canvas画图的层次关系
2.注意合理利用beginPath()和closePath()
3.由于圆心每个角度的坐标点无法准确确定,因此用arc()化弧度,从而的得到刻度浮点,然后通过closePath闭合形成路径,填充,然后在填充一个较小的圆填充白色,从而产生刻度。
4.通过fillText(),strokeText()来打上时间点。
<!DOCTYPE HTML> <html > <head> <meta charset="UTF-8"> <title>html5 canvas打造时钟</title> <style type="text/css"> body,h3{margin:0;text-align:center} h3{ padding:0; text-align:center; background:#333; font-size:1.5em; color:#fff; line-height:2em; text-shadow:0 0 10px rgba(0, 39, 245, 0.65); } #canvas{ margin:20px 0; border:1px solid #bbb; background:#D6D5D5; } p{text-align:center;color:#bbb} </style> </head> <body> <h3>html5 canvas打造时钟</h3> <canvas > 您的浏览器不支持canvas,请使用高级浏览器。 http://blog.segmentfault.com/trigkit4/1190000000652925 </canvas> <p>似水流年,且行且珍惜!</p> <script type="text/javascript"> var canvas=document.getElementById('canvas'); if(canvas.getContext){ var context=canvas.getContext('2d'); drawClock(context); setInterval(function(){drawClock(context)},1000); } function drawClock(canvas){ var x=300, //钟表圆心坐标 y=300 r=200; //钟表半径 //清除画布 canvas.clearRect(0,0,canvas.width,canvas.height); //修饰部分 即,建立一个白色的画布 canvas.beginPath(); canvas.moveTo(x,y); canvas.arc(x,y,r,0,360,false); canvas.closePath(); canvas.fill; canvas.fill(); //镶嵌时钟数字 var date=new Date(),//创建日期对象 hours=date.getHours(), minutes=date.getMinutes(), seconds=date.getSeconds(); var hoursValue=(-90 + hours*30+minutes/2)*Math.PI/180, minutesValue=(-90+minutes*6)*Math.PI/180, secondsValue=(-90+seconds*6)*Math.PI/180; canvas.beginPath(); for(var i=0;i<60;i++){ canvas.moveTo(x,y); canvas.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } canvas.closePath(); canvas.stroke(); canvas.beginPath(); canvas.moveTo(x,y); canvas.fill; canvas.arc(x,y,r*19/20,0,2*Math.PI,false); canvas.closePath(); canvas.fill(); canvas.beginPath(); canvas.lineWidth=3; for(var i=0;i<12;i++){ canvas.moveTo(x,y); canvas.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false) } canvas.closePath(); canvas.stroke(); canvas.beginPath(); canvas.arc(x,y,r*18/20,0,2*Math.PI,false); canvas.closePath(); canvas.fill; canvas.fill(); canvas.font="bold 16px Arial"; canvas.textAlign='center'; canvas.textBaseLine='middle'; canvas.fill; canvas.fillText('12',x,y-165,200); canvas.fillText('6',x,y+165,200); canvas.fillText('3',x+165,y+5,200); canvas.fillText('9',x-165,y+5,200); dyear=date.getFullYear(), dmonth=date.getMonth()+1, dDate=date.getDate(), weeks=date.getDay(); canvas.fillText(dyear+'-'+dmonth+'-'+dDate+' '+dateWeek(weeks)+' '+hours+':'+toDouble(minutes)+':'+toDouble(seconds),x,y+60,200); canvas.lineWidth=5; canvas.beginPath(); canvas.moveTo(x,y); canvas.arc(x,y,r*10/20,hoursValue,hoursValue,false); canvas.closePath(); canvas.stroke(); canvas.lineWidth=3; canvas.beginPath(); canvas.moveTo(x,y); canvas.arc(x,y,r*14/20,minutesValue,minutesValue,false); canvas.closePath(); canvas.stroke(); canvas.lineWidth=1; canvas.beginPath(); canvas.moveTo(x,y); canvas.arc(x,y,r*16/20,secondsValue,secondsValue,false); canvas.closePath(); canvas.stroke(); } function toDouble(num){ num>=10 ? num=''+num : num='0'+num ; return num; } function dateWeek(data){ switch(data){ case 1: return '星期一'; break; case 2: return '星期二'; break; case 3: return '星期三'; break; case 4: return '星期四'; break; case 5: return '星期五'; break; case 6: return '星期六'; break; case 7: return '星期日'; break; } } </script> </body> </html>