html5之Canvas路径绘图、坐标变换应用实例
2012-12-26 15:58
453 查看
在上一篇中我们了解html5的Canvas ,在这一篇中不用多说,写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate),以及html5 Canvas的路径绘图,beginPath,closePath,rect,arc等,还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制,save,restore。
多的也不说了,直接上代码,有不解的欢迎提问,以及对我的建议指教都可以。
ff下效果图:
代码:
多的也不说了,直接上代码,有不解的欢迎提问,以及对我的建议指教都可以。
ff下效果图:
代码:
<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之Canvas坐标变换应用-时钟实例
- html5之Canvas坐标变换应用-时钟实例
- HTML5教程实例-Canvas标签-坐标变换与路径结合使用
- html5之Canvas坐标变换应用-时钟实例
- [转]html5之Canvas坐标变换应用-时钟实例
- html5之Canvas坐标变换应用-时钟实…
- HTML5之Canvas绘图实例——饼状图
- 【实例】html5在canvas上绘制坐标轴
- HTML5绘图之Canvas标签 绘制坐标轴
- HTML5 Canvas 开发 绘图方法整理 【十二、Canvas重点之:路径 】
- HTML5 Canvas绘图并保存文件的实例
- HTML5 Canvas 绘制路径实例
- [HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用
- HTML5 canvas基本绘图之图形变换
- 读HTML5应用开发与实践【四】【坐标变换】
- HTML5应用-----canvas 实例,图片旋转 IE+ FF OP CH 兼容
- HTML5 Canvas――用路径描画线条实例介绍
- 【Html5每日练习】canvas绘制坐标变换图形
- HTML5 移动开发 -- Canvas 绘图 9.2 三角形路径绘制, 圆, 圆弧,二元三元抛物线, 渐变