iT邦幫忙

DAY 9
3

且戰且走HTML5系列 第 9

且戰且走HTML5(9) 應用的主軸:Canvas

Canvas是HTML5中很熱門的技術,目前已經有非常多的應用。接下來就會以Canvas做主角,逐漸發展出應用。先來簡單了解一下Canvas是什麼。
其實Firefox非常早就支援Canvas元素了,時間大概在2006到2007左右吧?還記得當時強者我同事還用GreaseMonkey寫了簡單的塗鴉功能,方便使用html簡報。

HTML5的Canvas,其實真的就只是一個畫布,單靠他能做的事情不多。除了設定基本的長、寬屬性,大概就只有取得context與把它輸出成DataURL這兩種Method可以使用。

簡單地用程式來示範:

 <meta charset='utf-8'>
 
 <link rel="StyleSheet" type="text/css" href="reset.css">
 <style>
 canvas {
 	border: solid 1px gray;
 }
 </style>
 <script src='http://code.jquery.com/jquery-1.8.2.min.js'></script>
 <script>
 $(document).ready(function() {
 	var canvas = $('#canvas');
 	//取得Context
 	var context = canvas[0].getContext('2d');
 	var drawing = false;
 	var queue = [];
 
 	canvas.bind('mousedown', function(e) {
 		if(!drawing) {
 			drawing = true;
 			var offset = $(e.currentTarget).offset()
 			var x = e.pageX - offset.left;
 			var y = e.pageY - offset.top;
 			drawLine(context,x,y,x,y);
 			queue.push([x,y]);
 		}
 	});
 	canvas.bind('mouseup', function(e) {
 		if(drawing) {
 			var old = queue.shift();
 			var offset = $(e.currentTarget).offset();
 			var x = e.pageX - offset.left;
 			var y = e.pageY - offset.top;
 			drawLine(context,old[0], old[1], x, y);
 			drawing = false;
 		}
 	});
 	canvas.bind('mousemove', function(e) {
 		if(drawing) {
 			var old = queue.shift();
 			var offset = $(e.currentTarget).offset();
 			var x = e.pageX - offset.left;
 			var y = e.pageY - offset.top;
 			drawLine(context,old[0],old[1],x,y);
 			queue.push([x,y]);
 		}
 	});
 	function drawLine(ctx,x,y,x1,y1) {
 		ctx.beginPath();
 		ctx.moveTo(x,y);
 		ctx.lineTo(x1,y1);
 		ctx.closePath();
 		ctx.stroke();
 	}
 	$('#toshow').click(function() {
                //把canvas轉成DataURL
 		var url = $('#canvas')[0].toDataURL();
 		$('#show').prop('src', url);
 	});
 });
 </script>
 
 
 <canvas id="canvas" width='320' height='240'></canvas>
 <button id='toshow'>>>></button><img id='show'>
 
 

繪圖部分會等到後面單元在解釋,不過上例可以看出使用getContext以及toDataURL()的作用:使用getContext()來取得Context,使用他來塗鴉,按下「>>>」按鈕後,使用toDataURL()把Canvas的內容輸出成DataURL,然後用img來顯示。

執行的畫面:

可以看到,真正要把東西畫到Canvas上面,需要使用不同的的Context。目前常見的Context大概有兩種,一個是專門用來做2D圖形繪製的Context,就叫做Canvas 2D Context(如範例所示)。另一個是WebGL,可以在Canvas中繪製3D的圖像。目前瀏覽器對於WebGL的支援還不普及,而且...WebGL需要的知識遠勝過2D Context。同時,2D Context大概都已經是支援Canvas的瀏覽器的標準功能了,只要瀏覽器支援Canvas,就一定能使用2D Context API。(如果不能使用,Canvas也沒多大用處就是了,究竟他本身並沒有內建繪圖機制)

我沒碰過OpenGL,更不用說WebGL,所以這方面是一竅不通的,這次就不為難自己,還是以2D Context為主來發展。希望探索幾類的Canvas 2D的繪圖功能與機制,然後模擬出類似小畫家的繪圖工具,最後搭配WebSocket,做出可以多人同時塗鴉的白板。


上一篇
且戰且走HTML5(8) Socket.IO的架構與連線管理機制
下一篇
且戰且走HTML5(10) Canvas 及 2D context可以做到的事情
系列文
且戰且走HTML530

尚未有邦友留言

立即登入留言