html5之Canvas路径绘图、坐标变换应用实例_HTML5教程

推荐：html5中为audio标签增加停止按钮动作实现方法
在html 5中的audio标签中，只有暂停按钮，但没有停止按钮，其实为其增加也不麻烦，接下来介绍实现方法，有需要的朋友可以参考下

在上一篇中我们了解HTML5/">html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。
多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。
ff下效果图：

代码：

复制代码代码如下:www.mb5u.com

 
<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 web本地存储将取代我们的cookie
在html5中为我们提供了一种本地缓存机制，它将取代我们的cookie，并且它是不会随浏览器发会我们的服务器端的html5中缓存主要有localStorage，和sessionStorage,具体请祥看本文

来源：未知/所属分类：HTML5教程/更新时间：2013-04-22

[收藏][报错][返回列表]

html5之Canvas路径绘图、坐标变换应用实例_HTML5教程

HTML5教程Rss订阅Div+Css教程搜索

HTML5教程推荐

猜你也喜欢看这些