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 lang="en-US">
<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 id="canvas" width="600" height="600">
您的浏览器不支持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();
//moveTo()将绘图游标移到(x,y)不画线
canvas.moveTo(x,y);
//arc(x,y,半径,起始弧度,结束弧度，旋转方向true|false)
//arc 绘制圆形顺时针为false
canvas.arc(x,y,r,0,360,false);
//closePath()结束绘图
canvas.closePath();
canvas.fillStyle='#fff';
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.fillStyle='#fff';
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.fillStyle='#fff';
canvas.fill();
canvas.font="bold 16px Arial";
canvas.textAlign='center';
canvas.textBaseLine='middle';
canvas.fillStyle='red';
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>
转自：http://www.w3cfuns.com/blog-5452328-5404265.html

巴特西

canvas做的时钟，学习下

最新文章

热门文章