2. 程式人生 > >canvas 案例——時鐘

canvas 案例——時鐘

阿新 • • 發佈：2019-01-16

首先先理解幾個方法：

1、save()和restore()：這對法寶非常有用，兩個配對使用，saved方法用於臨時儲存畫布的座標系統的狀態；restore方法用來恢復save之後儲存的狀態。可以簡單的理解為，save之後的一系列的操作，比如translate和rotate等，在restore後，都會被釋放恢復到原來的座標狀態。

eg：

        ctx.strokeStyle = '#000';
        ctx.strokeRect(10,10,200,100);	//空心矩形
		ctx.translate(10,10);	//改變座標原點
		ctx.strokeStyle = 'red';
		ctx.strokeRect(10,10,200,100);	//實心矩形

效果：

接下來加上save和restore

ctx.strokeStyle = '#000';
		ctx.strokeRect(10,10,200,100);	//空心矩形
		ctx.save();
		ctx.translate(10,10);	//改變座標原點
		ctx.restore();
		ctx.strokeStyle = 'red';
		ctx.strokeRect(10,10,200,100);	//實心矩形

效果：

從圖一不難發現沒加save和restore之前，紅色的矩形已經是以（10，10）為原點來繪製了，加了之後畫布恢復到translate的操作之前，原點仍然是（0，0），因此圖二的紅色矩形才會把上一個矩形給覆蓋了。

2、translate()：預設畫布的原點為（0,0），呼叫此方法可改變畫布座標原點的位置。呼叫此方法後，x座標往左的位置以及y座標往上的位置都為負值。

eg：可以從上面的圖一來理解，紅色的矩形已經以（10，10）為原點來繪製了。負值的理解如下：假如把原點的位置放到畫布的正中間，那麼各區間的座標如下：

3、rotate(angle)：此方法用來對畫布執行旋轉操作，預設旋轉的中心點為畫布的座標原點，可以通過translate來改變旋轉中心的位置。angle為旋轉的角度，以弧度計算，旋轉30度的話angle就是20*Math.PI/180。

eg：讓一個正方形圍繞著自己的中心點旋轉30度，

ctx.strokeRect(100,100,200,100);
		ctx.save();
		ctx.strokeStyle = 'red';
		ctx.translate(200,150);
		ctx.rotate(30*Math.PI/180);
		ctx.strokeRect(-100,-50,200,100);
		ctx.restore();

效果：

接下來說下時鐘的主要思路：就是每隔一秒把當前的時分秒對應的時針、分針、秒針繪製到畫布上就可以了，時針對應12個刻度，因此每個刻度旋轉30度，當前小時對應的旋轉角度就應該是rotate（hour*30*Math.PI/180）；分針和秒針一樣對應60個刻度，每個刻度旋轉6度，當前分鐘和秒對應的旋轉角度是rotate（minute*6*Math.PI/180）以及rotate(seconds*6*Math.PI/180)。

具體程式碼如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>canvas 時鐘</title>
	<style>
		*{margin: 0; padding: 0;}
		.main{
			width: 1000px;
			padding: 50px 0;
			border: 1px solid #ccc;
			margin: 0 auto;
			text-align: center;
		}
		#canvas{
			margin: 50px 0;
			background-color: deepskyblue;
		}
	</style>
</head>
<body>
<div class="main">	
	<canvas id="canvas" width="600" height="600">您的瀏覽器不支援canvas</canvas>
</div>
<script>
	window.onload = function(){
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		
		function drawClock(){
			//獲取當前的時分秒
			var now = new Date();
			var seconds = now.getSeconds();
			var minute = now.getMinutes();
			var hour = now.getHours();
            //小時必須獲取浮點型別，產生偏移（小時+分鐘比）
			hour = hour+minute/60;
			//將24小時轉換為12小時
			hour = hour>12?hour-12:hour;
			
			//填寫標題
			ctx.font = '36px 微軟雅黑';			
			var grident = ctx.createLinearGradient(0,0,300,0);	//建立漸變
				grident.addColorStop(0.5,'yellow');
				grident.addColorStop(0.8,'blue');
				grident.addColorStop(1,'red');			
				ctx.fillStyle = grident;	//用漸變來填充顏色
				ctx.fillText	('canvas 時鐘',200,60);
				
				//畫圓			
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 5;
				ctx.arc(300,300,200,0,Math.PI*360/180,false);
				ctx.strokeStyle = 'blue';
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				//畫時鐘的刻度	12個刻度，每個刻度旋轉30度	
				for(var i=0;i<=12;i++){
					ctx.save();
					ctx.strokeStyle = 'black';
					ctx.lineWidth = 7;
					ctx.translate(300,300);	//設定畫布的原點
					ctx.rotate(i*Math.PI*30/180,300,300);	//rotate（）後兩個引數設定旋轉的中心點
					ctx.beginPath();	
					ctx.moveTo(0,-172);
					ctx.lineTo(0,-192);
					ctx.stroke();
					ctx.closePath();
					ctx.restore();
				}
				
				//畫秒鐘的刻度	60個刻度，每個刻度旋轉6度	
				for(var i=0;i<=60;i++){
					ctx.save();
					ctx.strokeStyle = 'black';
					ctx.lineWidth = 3;
					ctx.translate(300,300);	//設定畫布的原點
					ctx.rotate(i*Math.PI*6/180,300,300);	//rotate（）後兩個引數設定旋轉的中心點
					ctx.beginPath();	
					ctx.moveTo(0,-182);
					ctx.lineTo(0,-192);
					ctx.stroke();
					ctx.closePath();
					ctx.restore();
				}
				
				//標註小時
				ctx.save();
				ctx.fillStyle = 'deeppink';
				ctx.font = '22px 微軟雅黑';
				ctx.lineWidth = 6;
				ctx.fillText(12,286,150);
				ctx.fillText(1,370,170);
				ctx.fillText(2,430,230);
				ctx.fillText(3,456,310);
				ctx.fillText(4,430,390);
				ctx.fillText(5,380,440);
				ctx.fillText(6,295,468);
				ctx.fillText(7,215,446);
				ctx.fillText(8,158,390);
				ctx.fillText(9,132,310);
				ctx.fillText(10,156,230);
				ctx.fillText(11,210,176);
				ctx.restore();				
				
				//畫時針
				ctx.save();
				ctx.lineWidth = 7;
				ctx.strokeStyle = 'yellow';
				ctx.translate(300,300);
				ctx.rotate(hour*30*Math.PI/180);
				ctx.beginPath();
				ctx.moveTo(0,20);
				ctx.lineTo(0,-140);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				//畫分針
				ctx.save();
				ctx.lineWidth = 5;
				ctx.strokeStyle = 'blue';
				ctx.translate(300,300);
				ctx.rotate(minute*6*Math.PI/180);
				ctx.beginPath();
				ctx.moveTo(0,20);
				ctx.lineTo(0,-168);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				//畫秒針
				ctx.save();
				ctx.lineWidth = 3;
				ctx.strokeStyle = 'red';
				ctx.translate(300,300);
				ctx.rotate(seconds*6*Math.PI/180);
				ctx.beginPath();
				ctx.moveTo(0,20);
				ctx.lineTo(0,-186);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				
				//圈出時針，分針，秒針的交叉點
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 3;
				ctx.strokeStyle = 'red';
				ctx.arc(300,300,5,0,360*Math.PI/180,false);
				ctx.fillStyle = '#fff';
				ctx.fill();
				ctx.stroke();
				ctx.closePath();
				
				//裝飾秒針
				ctx.save();
				ctx.beginPath();				
				ctx.lineWidth = 3;
				ctx.strokeStyle = 'red';
				ctx.translate(300,300);
				ctx.rotate(seconds*6*Math.PI/180);	//讓當前的裝飾跟著秒針一起轉動
				ctx.arc(0,-160,5,0,360*Math.PI/180,false);
				ctx.fillStyle = '#fff';
				ctx.fill();
				ctx.stroke();
				ctx.restore();
		}
		
		drawClock();
		setInterval(function(){
			ctx.clearRect(0,0,canvas.width,canvas.height);
			drawClock();
		},1000);
	}
</script>
</body>
</html>

效果：

相關推薦

canvas 案例——時鐘

首先先理解幾個方法： 1、save()和restore()：這對法寶非常有用，兩個配對使用，saved方法用於臨時儲存畫布的座標系統的狀態；restore方法用來恢復save之後儲存的狀態。可以簡單的理解為，save之後的一系列的操作，比如translate和rotate等

canvas繪畫時鐘及倒計時時鐘

整數 效果圖 有時 二維 -c 更新時間 enter 程序 etc 因為偶是一個前端小白，所以呢！！！！想要把自己在網上看的代碼，並且自己敲了一遍，做了註釋分享給大家~~~不喜勿噴，謝謝喲！我是super喵二（程序媛），大家一起成長！！！ 倒計時時鐘（先放效果圖）（好吧我

canvas繪製時鐘

css樣式 <style> body { background: black } #canvas { background: white; } </style> html <c

canvas 製作時鐘

1 <!DOCTYPE html> 2 <html> 3 <head>  4 <meta charset="utf-8"> 5   6 <title>菜鳥教程(runoob.com)<

Canvas：時鐘

這個時鐘是將鐘盤的圓心點移到了 canvas 畫布中心點。以方便後面的方位計算 ctx.translate(width/2,height/2); 現定義一個圓盤來顯出這個時鐘的基本位置 ctx.save() ctx.beginPath();

Canvas 畫時鐘

前言 不管學習什麼，不動手去做，永遠不能熟練掌握。學習了 canvas API，會覺得只要按照直線、圓等畫法去畫，canvas 太簡單了。可是，當你真正去畫的時候，會遇到許多的問題。 下面介紹的是 canvas 時鐘，主要是與大家分享我的學習過程。

通過html5 canvas繪製時鐘

最近一直在學習html5，學到了html5的canvas標籤，這個畫布真的是很強大，它有對應的javascript的api的支援，你可以在這個標籤裡面繪製任意的圖形，你也可以把圖片放在裡面，能夠做出很炫的效果。 言歸正傳，廢話不多說，首先，html，只一句

js canvas 轉動時鐘例項

原始碼：https://pan.baidu.com/s/1R12MwZYs0OJw3OWKsc8WNw 樣本：http://js.zhuamimi.cn/shizhong/ 我的百度經驗：https://jingyan.baidu.com/article/1974b28935a46bf

js+畫布canvas製作時鐘特效

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><canvas id

h5之canvas畫時鐘

function clock () { var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 清除畫布內容

微信小程式canvas動態時鐘

canvas時鐘效果圖：程式碼：wxml:<view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='

Canvas寫時鐘

用canvas寫時鐘，實現效果如圖所示 1.獲取canvas和獲取繪圖環境 2.繪製錶盤 繪製一個圓心為（250，250），半徑為200的圓，0表示起始角度，2*Math.PI表示結束角度，false表示順時針開始畫 3.畫刻度 for迴圈建立刻度，以圓心為中心，先畫

[SoOnPerson] HTML5 Canvas 模擬時鐘

因為和朋友在討論一個關於時鐘的問題：    一天（24h）,時鐘的分針和時針可以重合多少次，他們一直在爭論22，23然後我覺得蠻好玩的，就寫了一個看看，但是對於22，23，我也沒想數過//螢幕的高度 var sc_height = screen.availHeight; //

Canvas製作時鐘

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycan

canvas風景時鐘

代碼 tle int utf-8 cli rest utf ont 添加 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

03 canvas幀動畫封裝案例

onclick width tel frame wid class () wim code sprite.js /** * Created by suxiaoxia on 2017/7/15. */ function sprite(option) { this.

android中canvas.drawText參數的介紹以及繪制一個文本居中的案例

.cn 介紹 ondraw image 圖片 oat sin es2017 tco float baseline = height/2 + mPaint.getTextSize()/2 - mPaint.getFontMetrics().descent;文字尺寸就是 pr

canvas--時鐘

utf-8 line arc reac red 2個 post false rec 可以進群領取 WEB前端學習交流群21 598399936 <!DOCTYPE html><html lang="en"><head> <

DOM案例【1】文本時鐘

ring tle 位數 date() 時間顯示 檢查 ret urn col 1.網絡參考 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

原生js之canvas時鐘組件

raw document tel align -a 映射 曲線 its 繪制圖形 canvas一直是前端開發中不可或缺的一種用來繪制圖形的標簽元素，比如壓縮上傳的圖片、比如刮刮卡、比如制作海報、圖表插件等，很多人在面試的過程中也會被問到有沒有接觸過canvas圖形繪制。 定