在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。
多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以，![X@8}U9MLE}EBUE273)]9PGF](http://images.cnblogs.com/cnblogs_com/whitewolf/201103/201103022317095203.gif "X@8}U9MLE}EBUE273)]9PGF"){kind=small}
。
ff下效果图：
代码：
- View Code
- <html>
- <head>
- </head>
- <body>
- <canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>
- <script type="text/javascript">
- var c = document.getElementById("myCanvas");
- var cxt = c.getContext("2d");
- var slen = 60;
- var mlen = 50;
- var hlen = 40;
- cxt.strokeRect(0, 0, c.width, c.height);
- cxt.beginPath();
- cxt.strokeStyle = "#00f";
- cxt.fillStyle = "#00f";
- cxt.arc(200, 150, 5, 0, 2 * Math.PI, true);
- cxt.fill();
- cxt.closePath();
- cxt.beginPath();
- cxt.strokeStyle = "#00f";
- cxt.arc(200, 150, 100, 0, 2 * Math.PI, true);
- cxt.stroke();
- cxt.closePath();
- cxt.beginPath();
- cxt.translate(200, 150); //平移原点；
- cxt.rotate(-Math.PI / 2);
- cxt.save();
- for (var i = 0; i < 60; i++) {
- if (i % 5 == 0) {
- // cxt.fillStyle = "#ff0000";
- cxt.fillRect(80, 0, 20, 5);
- cxt.fillText("" + (i / 5 == 0 ? 12 : i / 5), 70, 0);
- } else {
- // cxt.strokeStyle = "#00f";
- cxt.fillRect(90, 0, 10, 2);
- }
- //document.getElementById("div1").innerText += " " + i;
- cxt.rotate(Math.PI / 30);
- }
- cxt.closePath();
- var ls = 0, lm = 0, lh = 0;
- function Refresh() {
- cxt.restore();
- cxt.save();
- cxt.rotate(ls * Math.PI / 30);
- cxt.clearRect(5, -1, slen+1, 2+2);
- cxt.restore(); cxt.save();
- cxt.rotate(lm * Math.PI / 30);
- cxt.clearRect(5, -1, mlen+1, 3+2);
- cxt.restore(); cxt.save();
- cxt.rotate(lh * Math.PI / 6);
- cxt.clearRect(5, -3, hlen+1, 4+2);
- var time = new Date();
- var s = ls=time.getSeconds();
- var m = lm=time.getMinutes();
- var h = lh=time.getHours();
- cxt.restore();
- cxt.save();
- cxt.rotate(s * Math.PI / 30);
- cxt.fillRect(5, 0, slen, 2);
- cxt.restore(); cxt.save();
- cxt.rotate(m * Math.PI / 30);
- cxt.fillRect(5, 0, mlen, 3);
- cxt.restore(); cxt.save();
- cxt.rotate(h * Math.PI / 6);
- cxt.fillRect(5, -2, hlen, 4);
- }
- var MyInterval = setInterval("Refresh();", 1000);
- </script>
- <div id="div1" style=" background:#00f;"></div>
- </body>
- </html>
- 复制代码
我的html5系列
本文转自 破狼 51CTO博客，原文链接：http://blog.51cto.com/whitewolfblog/835238，如需转载请自行联系原作者
