Hey,guys! 让我们一起用HTML5实现一下简易时钟吧！
接触canvas时， 我突然有一种非常熟悉的感觉------canvas的部分的功能其实和Photoshop中的 钢笔工具 是一样的。所以，如果你对 PS里的 钢笔工具 运用自如的话，恭喜你，canvas你将很快上手~~
说下对HTML5中canvas的理解，canvas翻译成中文就是画布，顾名思义，canvas当然是用来作画的啦~~
作画嘛，其实现的思想 与 photoshop 基本上是一样的~~，只不过photoshop可以用可视化工具， 而来到HTML5 / JS 就是用代码自己手敲而已。
所以总结一下： canvas 是用来画画的！至于你想画点什么，就是你自己的事咯！
canvas对象中getContext('2d')，就相当于是 PS里的 钢笔工具，下面说一下它们对应关系：
beginPath----> 开始画路径
moveTo -----> 路径开始点
lineTo -------> 拉直线路径到甘个点
clothPath ---> 闭合路径
stroke ------> 描边路径(这也是为什么当lineWidth设为大于1px时，如10px，它是从中间向两边各分一半的原因，PS里的 钢笔工具 就是这样的)
fill-----------> 填充路径
bezierCurveTo 和 quadraticCurveTo 更是 PS里的 钢笔工具 的精髓之处！
等等等等......
好，如果你感兴趣的话，可以去折腾一下 PS里的 钢笔工具 哦，相信会对你理解canvas对象中getContext('2d')的属性和方法有一定帮助
下面是HTML5时钟的实现代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8">
<title>clock by html5</title>
<style>
body {
background: #333;
} #canvas1 {
display: block;
width: 400px;
margin: 100px auto;
} </style> <script>
window.onload = function (){ var oC = document.getElementById('canvas1'); var oCtx = oC.getContext('2d');
var x = 0; //圆心x
var y = 0; //圆心y
var r = 0; //圆心r
initialize();
setInterval(DrawUpdate,1000); function initialize(){ x = 200; //圆心x
y = 200; //圆心y
r = 150; //圆心r
oCtx.strokeStyle = '#1ec1e4';
oCtx.fillStyle = '#333'; //画秒刻度
for(var i=0; i<60; i++){
oCtx.beginPath();
oCtx.moveTo(x, y);
oCtx.arc(x, y, r, i*6*Math.PI/180, (i+1)*6*Math.PI/180);
oCtx.stroke();
}
oCtx.closePath(); oCtx.beginPath();
oCtx.arc(x, y, r-8, 0, 2*Math.PI);
oCtx.closePath();
oCtx.fill(); //画分钟刻度
oCtx.lineWidth = 2;
oCtx.beginPath();
for(var i=0; i<12; i++){
oCtx.moveTo(x, y);
oCtx.arc(x, y, r, i*30*Math.PI/180, i*30*Math.PI/180);
oCtx.stroke();
}
oCtx.closePath(); /*
在DrawUpdate中可以实现，就没必要了
oCtx.beginPath();
oCtx.arc(x, y, r-12, 0, 2*Math.PI);
oCtx.closePath();
oCtx.fill();
oCtx.closePath();*/ DrawUpdate();
} //负责更新时间
function DrawUpdate(){ var iSecValue = 0; //秒针对应的刻度
var iMinValue = 0; //分针对应的刻度
var iHourValue = 0; //时针对应的刻度 var oDate = new Date();
var iSec = oDate.getSeconds();
var iMin = oDate.getMinutes();
var iHour = oDate.getHours();
iSecValue = (- 90 + iSec*6) * Math.PI/180;
iMinValue = (- 90 + iMin*6 + iSec/10)* Math.PI/180;
iHourValue = (- 90 + iHour*30 + iMin/2)* Math.PI/180; //遮罩,覆盖原来的时间
oCtx.beginPath();
oCtx.arc(x, y, r-12, 0, 2*Math.PI);
oCtx.closePath();
oCtx.fill(); //画时针
oCtx.lineWidth = 3;
oCtx.beginPath();
oCtx.moveTo(x, y);
oCtx.arc(x, y, r*0.5, iHourValue, iHourValue);
oCtx.stroke(); //画分针
oCtx.lineWidth = 2;
oCtx.beginPath();
oCtx.moveTo(x, y);
oCtx.arc(x, y, r*0.8, iMinValue, iMinValue);
oCtx.stroke(); //画秒针
oCtx.lineWidth = 1;
oCtx.beginPath();
oCtx.moveTo(x, y);
oCtx.arc(x, y, r*0.9, iSecValue, iSecValue);
oCtx.stroke();
}
}
</script> </head> <body>
<canvas id="canvas1" width="400" height="400">Hey,guys!您的浏览器版本也太低了吧，赶紧升级下吧，推荐Google Chrome哦！</canvas>
</body>
<html>
欢迎拍砖，如果bug, 请留言提醒， 觉得好帮忙点下 推荐哦~~--------------------------------------------------------------------------------------------------------------------------------------------↓
↓
↓
↓
↓
↓