html5之Canvas路徑繪圖、坐標變換應用實例
發(fā)布時間：2012-12-26 15:58:09 作者：佚名 
我要評論
我要評論本文寫一個html5的時鐘應用程序試手主要設置了坐標變換的平移（translate）和旋轉(zhuǎn)變換（ratate），以及html5 Canvas的路徑繪圖，beginPath，closePath，rect，arc等多的也不說了，直接上代碼有需要的朋友可以參考下
在上一篇中我們了解html5的Canvas ，在這一篇中不用多說，寫一個html5的時鐘應用程序試手。在這里主要設置了坐標變換的平移（translate）和旋轉(zhuǎn)變換（ratate），以及html5 Canvas的路徑繪圖，beginPath，closePath，rect，arc等，還有就是html5 Canvas路徑繪圖重要的繪圖狀態(tài)的保存和恢復機制，save，restore。
多的也不說了，直接上代碼，有不解的歡迎提問，以及對我的建議指教都可以。
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>
多的也不說了，直接上代碼，有不解的歡迎提問，以及對我的建議指教都可以。
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>
相關(guān)文章
HTML5通過調(diào)用canvas對象的getContext()方法來獲取繪圖環(huán)境
通過調(diào)用canvas對象的getContext()方法來獲取繪圖環(huán)境，其只需要一個參數(shù)：繪圖環(huán)境的類型，下面通過實例為大家詳細介紹下2014-06-23- 在html5中我覺得最重要的就是引入了Canvas，使得我們可以在web中繪制各種圖形,而Canvas為基于像素的繪圖。Canvas是一個相當于畫板的html節(jié)點，我們必須以js操作繪圖2012-12-26
- 這篇文章主要介紹了利用HTML5中的Canvas繪制一張笑臉的教程,使用Canvas進行繪圖是HTML5中的基本功能,需要的朋友可以參考下2015-05-07
- 這篇文章主要介紹了HTML5 canvas標簽實現(xiàn)刮刮卡效果,本文給出了運行效果、HTML代碼和JS代碼,并給出了完整源碼下載,需要的朋友可以參考下2015-04-24
- 這篇文章主要介紹了HTML5 Canvas的事件處理介紹,本文講解了Canvas的限制、給Canvas元素綁定事件、isPointInPath方法、循環(huán)重繪和事件冒泡等內(nèi)容,需要的朋友可以參考下2015-04-24
- 這篇文章主要介紹了HTML5 Canvas中繪制橢圓的4種方法,本文講解了參數(shù)方程法、均勻壓縮法、三次貝塞爾曲線法、光柵法等4種方法,需要的朋友可以參考下2015-04-24
一款基于HTML5+Canvas實現(xiàn)的圖片馬賽克模糊動畫特效源碼
經(jīng)?？梢栽诰W(wǎng)上或者電視上看到被馬賽克模糊的圖片或者視頻，今天我們要利用HTML5 Canvas技術(shù)來實現(xiàn)圖片的馬賽克模糊效果2015-02-05
HTML5基于Canvas實現(xiàn)的粒子人物頭像效果源碼
今天我們要再利用HTML5 Canvas實現(xiàn)一個粒子效果的人物頭像，你可以任意選擇一張頭像圖片，接下來該圖片會被打散成許多粒子2015-02-05
HTML5基于Canvas實現(xiàn)的折線圖表和柱形圖表源碼
今天要分享的一款HTML5 Canvas圖表應用提供了折線圖和柱形圖兩種，這款HTML5圖表在初始化數(shù)據(jù)的時候有一種漸現(xiàn)的動畫特效，我們可以將這款圖表應用在統(tǒng)計頁面上2015-01-20- 這篇文章主要介紹了HTML5 Canvas繪制圓點虛線實例,HTML5并未提供畫虛線的方法,本文是根據(jù)Stack Overflow的方法修改而來,需要的朋友可以參考下2015-01-01
