HTML5組件Canvas實(shí)現(xiàn)電子鐘-創(chuàng)新互聯(lián)

基本思路：

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)解放免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

首先繪制一個(gè)矩形背景，設(shè)置顏色為灰色。在背景上繪制一個(gè)簡單的矩形外邊框，然后再繪

制一個(gè)內(nèi)邊框，接著加載選定的圖像做為電子鐘內(nèi)部的背景圖片。然后開始繪制時(shí)鐘刻度，

繪制分鐘刻度，最后獲取當(dāng)前系統(tǒng)時(shí)間，繪制時(shí)分秒三個(gè)手柄。

技術(shù)要點(diǎn)：

使用HTML5的Canvas 2D繪制對(duì)象，主要使用context.save()與context.restore()方法來保存

繪制狀態(tài)和重置繪制狀態(tài)，使用Transform和fillRect()方法來繪制時(shí)鐘和分鐘刻度。使用

drawImage()方法來繪制背景圖片，使用setTimeout()方法來刷新時(shí)間顯示。

代碼詳解：

 獲取HTML5 Canvas繪制對(duì)象的代碼如下:

var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500);

繪制時(shí)鐘刻度的代碼如下：

		    var sin = Math.sin(Math.PI/6);   		    var cos = Math.cos(Math.PI/6);  		    ctx.translate(245, 245); 		    for (var i=0; i <= 12; i++) {   		    	// top 				ctx.fillRect(160,-7.5,30,10); 				ctx.strokeRect(160,-7.5,30,10); 				ctx.transform(cos, sin, -sin, cos, 0, 0);  	 		    }
繪制分鐘分鐘刻度的代碼如下：

		    var sin = Math.sin(Math.PI/30);   		    var cos = Math.cos(Math.PI/30);  		    for (var i=0; i <= 60; i++) {   				ctx.fillRect(170,-5,10,2); 				ctx.transform(cos, sin, -sin, cos, 0, 0); 	 		    }

保存制狀態(tài)代碼如下：

ctx.translate(245, 245); ctx.save();
恢復(fù)繪制狀態(tài)代碼如下：

ctx.restore();

運(yùn)行效果如下：

HTML5 組件Canvas實(shí)現(xiàn)電子鐘

程序完全源代碼如下：

<html> <head> <script> 	window.onload = function() { 		clockHand(); 	}; 	 	function clockHand() { 		var canvas = document.getElementById("canvas1"); 		ctx = canvas.getContext("2d"); 		ctx.clearRect(0, 0, 500, 500); 		 		// create background rectangle 		// ctx.lineWidth = 10;   		ctx.fillStyle = "gray"; 		ctx.fillRect(0,0,500,500); 		 		// draw frame 		ctx.lineWidth = 10;   		ctx.strokeStyle = "green"; 		ctx.strokeRect(0,0,500,500); 		 		// draw author infomation 		ctx.fillStyle = "blue"; 		ctx.font = "20px Times New Roman"; 		ctx.fillText("-created by gloomyfish", 150, 30); 		 		// draw inner rectangle 		ctx.lineWidth = 10;   		ctx.strokeStyle = "black"; 		ctx.strokeRect(45,45,400,400); 		 		// create background image 		var img=new Image(); 		img.src="background.png"; 		img.onload = function() {  		    ctx.drawImage(img,45,45,400,400); 		    ctx.save(); 			// draw marker unit 			ctx.lineWidth = 2; 		    ctx.fillStyle = "purple"; 		    ctx.strokeStyle = "black"; 		    var sin = Math.sin(Math.PI/6);   		    var cos = Math.cos(Math.PI/6);  		    ctx.translate(245, 245); 		    for (var i=0; i <= 12; i++) {   		    	// top 				ctx.fillRect(160,-7.5,30,10); 				ctx.strokeRect(160,-7.5,30,10); 				ctx.transform(cos, sin, -sin, cos, 0, 0);  	 		    } 		     		    // transform back center point 		     		    // ctx.translate(245, 245); 		    var sin = Math.sin(Math.PI/30);   		    var cos = Math.cos(Math.PI/30);  		    for (var i=0; i <= 60; i++) {   				ctx.fillRect(170,-5,10,2); 				ctx.transform(cos, sin, -sin, cos, 0, 0); 	 		    } 		    ctx.restore(); 		    // top 			ctx.fillText("12", 233,100); 			 			// bottom 			ctx.fillText("6", 240,400); 			 			// left 			ctx.fillText("9", 90,252); 			 			// right 			ctx.fillText("3", 395,250); 			 			// get time 			ctx.save(); 			ctx.translate(245, 245); 			ctx.save(); 			 			// dynamic show time 			var now=new Date(); 			var hrs=now.getHours(); 			var min=now.getMinutes(); 			var sec=now.getSeconds();  			//Draw hour hand 			ctx.rotate(Math.PI/6*(hrs+(min/60)+(sec/3600))); 			ctx.beginPath(); 			ctx.moveTo(0,10); 			ctx.lineTo(0,-60); 			ctx.stroke(); 			ctx.restore(); 			ctx.save(); 			 			//Draw minute hand 			ctx.rotate(Math.PI/30*(min+(sec/60))); 			ctx.beginPath(); 			ctx.moveTo(0,20); 			ctx.lineTo(0,-110); 			ctx.stroke(); 			ctx.restore(); 			ctx.save(); 			 			//Draw second hand 			ctx.rotate(Math.PI/30*sec); 			ctx.strokeStyle="#E33"; 			ctx.lineWidth = 2; 			ctx.beginPath(); 			ctx.moveTo(0,20); 			ctx.lineTo(0,-110); 			ctx.stroke(); 			ctx.restore(); 			 			// finally store to originall point 			ctx.restore(); 			setTimeout(clockHand,1000); 		}; 	} </script> </head> <body bgcolor="#E6E6FA"> 	<canvas id="canvas1" width="500" height="500">electronic clock</canvas> </body> </html>

不足之處：

每次都刷新加載image對(duì)象不怎么好，我是在google瀏覽器中測試的，建議在

google瀏覽器中運(yùn)行上面代碼。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：HTML5組件Canvas實(shí)現(xiàn)電子鐘-創(chuàng)新互聯(lián)
鏈接URL：http://bm7419.com/article24/dippce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計(jì)、App開發(fā)、虛擬主機(jī)、全網(wǎng)營銷推廣、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)