html5之Canvas路徑繪圖、坐標變換應用實例_HTML5教程
推薦:html5中為audio標簽增加停止按鈕動作實現(xiàn)方法在html 5中的audio標簽中,只有暫停按鈕,但沒有停止按鈕,其實為其增加也不麻煩,接下來介紹實現(xiàn)方法,有需要的朋友可以參考下
在上一篇中我們了解HTML5/">html5的Canvas ,在這一篇中不用多說,寫一個html5的時鐘應用程序試手。在這里主要設置了坐標變換的平移(translate)和旋轉變換(ratate),以及html5 Canvas的路徑繪圖,beginPath,closePath,rect,arc等,還有就是html5 Canvas路徑繪圖重要的繪圖狀態(tài)的保存和恢復機制,save,restore。多的也不說了,直接上代碼,有不解的歡迎提問,以及對我的建議指教都可以。
ff下效果圖:
代碼:
復制代碼 代碼如下:m.dounai2.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,并且它是不會隨瀏覽器發(fā)會我們的服務器端的html5中緩存主要有l(wèi)ocalStorage,和sessionStorage,具體請祥看本文
相關HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標簽的定義與規(guī)定:body的介紹
- 關于HTML5的安全問題開發(fā)人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略(CSP)簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數(shù)據(jù)本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接:
- 教程說明:
HTML5教程-html5之Canvas路徑繪圖、坐標變換應用實例。