一步一步教你用Html5的Canvas繪制鐘表

1、表盤(pán)繪制

1.1、基礎(chǔ)樣式代碼

定義body背景色為粉色，在body中定義一個(gè)800*800的灰色畫(huà)布，clock.css文件內(nèi)容如下。

* { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; background: pink; } #clock { background: gray; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); }

1.2、基礎(chǔ)Html代碼

clock.html代碼結(jié)構(gòu)如下。

效果如圖：

1.3、定義表盤(pán)畫(huà)筆通用樣式

// 保存樣式 ctx.save(); // 定義基本樣式 // 定義基本線(xiàn)寬為10 ctx.lineWidth = 10; // 定義線(xiàn)的顏色為黑色 ctx.strokeStyle = "black"; // 定義線(xiàn)段末端以圓形結(jié)束 ctx.lineCap = "round"; // 將原點(diǎn)移動(dòng)到400, 400的位置 ctx.translate(400, 400); // 逆時(shí)針旋轉(zhuǎn)90度 ctx.rotate(-90 * Math.PI / 180); ctx.beginPath(); ctx.restore();

1.4、繪制外層空心表盤(pán)

表盤(pán)參數(shù)：

圓盤(pán)顏色：#325FA2

圓盤(pán)寬度：20

圓盤(pán)半徑：280

// 繪制外層空心表盤(pán) ctx.save(); // 定義外層空心表盤(pán)顏色 ctx.strokeStyle = "#325FA2"; // 定義線(xiàn)寬為20 ctx.lineWidth = 20; // 重置畫(huà)筆路徑 ctx.beginPath(); // 繪制半徑為280的圓形表盤(pán) ctx.arc(0, 0, 280, 0, 360 * Math.PI / 180); ctx.stroke(); ctx.restore();

效果如圖：

1.5、繪制時(shí)針刻度

時(shí)針刻度參數(shù)：

長(zhǎng)度為30

寬度為10

外層空心圓盤(pán)與時(shí)針刻度之間的距離也為30

// 繪制時(shí)針刻度 ctx.save(); for (var i = 0; i < 12; i++) { // 繪制12個(gè)時(shí)針刻度，每30度一個(gè) ctx.rotate(30 * Math.PI / 180); ctx.beginPath(); // 每個(gè)刻度從220 繪制到 250 ctx.moveTo(220, 0) ctx.lineTo(250, 0); ctx.stroke(); } ctx.restore();

效果如圖：

1.5、繪制分針刻度

分針刻度參數(shù)：

長(zhǎng)度為10

寬度為5

// 繪制分針刻度 ctx.save(); ctx.lineWidth = 5; for (var i = 0; i < 60; i++) { // 繪制48個(gè)分針刻度，每6度一個(gè) ctx.rotate(6 * Math.PI / 180); // 如果是時(shí)針位置，則不繪制 if ((i + 1) % 5 !== 0) { ctx.beginPath(); ctx.moveTo(240, 0) ctx.lineTo(250, 0); ctx.stroke(); } } ctx.restore();

效果如圖：

2、表針繪制

2.1、獲取系統(tǒng)時(shí)間時(shí)分秒的值

// 獲取系統(tǒng)時(shí)間的時(shí)分秒的值 var date = new Date(); // 獲取系統(tǒng)時(shí)間的秒的值 var s = date.getSeconds(); // 獲取系統(tǒng)時(shí)間的分鐘的值 var m = date.getMinutes() + s / 60; // 獲取系統(tǒng)時(shí)間的小時(shí)的值 var h = date.getHours() + m / 60; // 如果小時(shí)超過(guò)12則剪掉12，采用12小時(shí)制 h = h > 12 ? h - 12 : h;

2.2、繪制時(shí)針

時(shí)針參數(shù)：

寬度為30

頭部離圓心180，尾部離圓心40

// 繪制時(shí)針 ctx.save() // 定義線(xiàn)寬為30 ctx.lineWidth = 30; // 繪制時(shí)針旋轉(zhuǎn)位置 ctx.rotate(h * 30 * Math.PI / 180) ctx.beginPath() // 繪制時(shí)針線(xiàn) ctx.moveTo(-40, 0); ctx.lineTo(180, 0); ctx.stroke(); ctx.restore()

效果如圖：

2.3、繪制分針

分針參數(shù)：

寬度為20

頭部離圓心220，尾部離圓心60

// 繪制分針 ctx.save() // 定義線(xiàn)寬為20 ctx.lineWidth = 20; // 繪制分針旋轉(zhuǎn)位置 ctx.rotate(m * 6 * Math.PI / 180) ctx.beginPath() ctx.moveTo(-60, 0); ctx.lineTo(220, 0); ctx.stroke(); ctx.restore()

效果如圖：

2.4、繪制秒針

秒針參數(shù)：

顏色：D40000

寬度為10

頭部離圓心200，尾部離圓心70

中心實(shí)心圓盤(pán)半徑為20

秒針頭從215開(kāi)始繪制半徑為15、寬度為10的空心圓

// 繪制秒針 ctx.save(); // 定義線(xiàn)寬為10 ctx.lineWidth = 10; // 定義秒針顏色及填充顏色為D40000 ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; // 繪制秒針旋轉(zhuǎn)位置 ctx.rotate(s * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(-70, 0); ctx.lineTo(200, 0); ctx.stroke(); // 繪制表座 ctx.beginPath(); ctx.arc(0, 0, 20, 0, 360 * Math.PI / 180); ctx.fill(); // 繪制秒頭 ctx.beginPath(); ctx.arc(215, 0, 15, 0, 360 * Math.PI / 180); ctx.stroke(); ctx.restore()

效果如圖：

3、讓鐘表動(dòng)起來(lái)

3.1、將表盤(pán)及表針繪制內(nèi)容封裝成一個(gè)函數(shù)move

function move() { // 保存樣式 ctx.save(); // 定義基本樣式 // 定義基本線(xiàn)寬為10 ctx.lineWidth = 10; // 定義線(xiàn)的顏色為黑色 ctx.strokeStyle = "black"; // 定義線(xiàn)段末端以圓形結(jié)束 ctx.lineCap = "round"; // 將原點(diǎn)移動(dòng)到400, 400的位置 ctx.translate(400, 400); // 逆時(shí)針旋轉(zhuǎn)90度 ctx.rotate(-90 * Math.PI / 180); ctx.beginPath(); // 繪制外層空心表盤(pán) ctx.save(); // 定義外層空心表盤(pán)顏色 ctx.strokeStyle = "#325FA2"; // 定義線(xiàn)寬為20 ctx.lineWidth = 20; // 重置畫(huà)筆路徑 ctx.beginPath(); // 繪制圓形表盤(pán) ctx.arc(0, 0, 280, 0, 360 * Math.PI / 180); ctx.stroke(); ctx.restore(); // 繪制時(shí)針刻度 ctx.save(); for (var i = 0; i < 12; i++) { // 繪制12個(gè)時(shí)針刻度，每30度一個(gè) ctx.rotate(30 * Math.PI / 180); ctx.beginPath(); // 每個(gè)刻度從220 繪制到 250 ctx.moveTo(220, 0) ctx.lineTo(250, 0); ctx.stroke(); } ctx.restore(); // 繪制分針刻度 ctx.save(); ctx.lineWidth = 5; for (var i = 0; i < 60; i++) { // 繪制48個(gè)分針刻度，每6度一個(gè) ctx.rotate(6 * Math.PI / 180); // 如果是時(shí)針位置，則不繪制 if ((i + 1) % 5 !== 0) { ctx.beginPath(); ctx.moveTo(240, 0) ctx.lineTo(250, 0); ctx.stroke(); } } ctx.restore(); // 獲取系統(tǒng)時(shí)間的時(shí)分秒的值 var date = new Date(); // 獲取系統(tǒng)時(shí)間的秒的值 var s = date.getSeconds(); // 獲取系統(tǒng)時(shí)間的分鐘的值 var m = date.getMinutes() + s / 60; // 獲取系統(tǒng)時(shí)間的小時(shí)的值 var h = date.getHours() + m / 60; // 如果小時(shí)超過(guò)12則剪掉12，采用12小時(shí)制 h = h > 12 ? h - 12 : h; // 繪制時(shí)針 ctx.save(); // 定義線(xiàn)寬為30 ctx.lineWidth = 30; // 繪制時(shí)針旋轉(zhuǎn)位置 ctx.rotate(h * 30 * Math.PI / 180); ctx.beginPath(); // 繪制時(shí)針線(xiàn) ctx.moveTo(-40, 0); ctx.lineTo(180, 0); ctx.stroke(); ctx.restore(); // 繪制分針 ctx.save(); // 定義線(xiàn)寬為20 ctx.lineWidth = 20; // 繪制分針旋轉(zhuǎn)位置 ctx.rotate(m * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(-60, 0); ctx.lineTo(220, 0); ctx.stroke(); ctx.restore(); // 繪制秒針 ctx.save(); // 定義線(xiàn)寬為10 ctx.lineWidth = 10; // 定義秒針顏色及填充顏色為D40000 ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; // 繪制秒針旋轉(zhuǎn)位置 ctx.rotate(s * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(-70, 0); ctx.lineTo(200, 0); ctx.stroke(); // 繪制表座 ctx.beginPath(); ctx.arc(0, 0, 20, 0, 360 * Math.PI / 180); ctx.fill(); // 繪制秒頭 ctx.beginPath(); ctx.arc(215, 0, 15, 0, 360 * Math.PI / 180); ctx.stroke(); ctx.restore() ctx.restore(); }

3.2、使用計(jì)時(shí)器讓鐘表動(dòng)起來(lái)

// 開(kāi)始先執(zhí)行一次 move(); // 定時(shí)執(zhí)行，每1秒執(zhí)行一次 setInterval(function () { ctx.clearRect(0, 0, clock.width, clock.height); move(); }, 1000);

4、Html完整代碼

Canvas HTML HTML5

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。