web前端學習筆記，實踐篇（十二）原生JavaScript繪製圖形Canvas

圖形化指令碼：

在JavaScript中，圖形化指令碼，有大約五種類型。這裡，我唯寫寫，我自己學到的兩種，一是images，二是canvas。

images:

在HTML結構中，有一個標籤<img>專門來顯示圖片，而我們則可以通過document對象下images屬性來操作它，以達到圖形化動畫的目的。一個簡單的例子：

    <div class="de"><a href="#" id="dell">圖形</a></div>    <div class="d"><img src="img/img_01.jpg" alt="" title="" id="de" /></div>

在這個例子中，也許，我們有很多張圖片，如果，有兩張，通過滑鼠的滑動來分別顯示，我們該如何做呢？其實這裡會有很多種解決方案，一是在學習操作DOM的時候，我們會學習到一個修改屬性的原生方法setAttribute()，一個是通過images這個屬性來操作。下面是例子：

function de() {            var a = document.getElementById("dell");            a.onmouseover = function () {                var img = document.images[0];                img.src = "img/img_02.jpg";            }            a.onmouseout = function () {                var img = document.images[0];                img.src = "img/img_01.jpg";            }}window.onload = function () {            de();}

通過images[0]，我們可以得到第一個img標籤，這樣就達到了我們的目的。

function de() {            var a = document.getElementById("dell");            var b = document.getElementById("de");            a.onmouseover = function () {                b.setAttribute("src","img/img_02.jpg");            }            a.onmouseout = function () {                b.setAttribute("src","img/img_01.jpg");            }}window.onload = function () {            de();}

使用setAttribute()方法。

對於img的操作，只是一些簡單的動畫，如果需要更多複雜的動畫呢？那麼我們就得需要學習canvas標籤了。

canvas:

canvas標籤很早就在firefox遊覽器中得到支援，那麼我們該如何使用它呢？<canvas id="de" width="100" height="100"></canvas>，這一段的意思是建立了一個寬高100像素的畫布，於是，我們就可以在其上進行繪畫了。

再開始繪畫前，我們還需要先取得繪圖的環境，用getContext()方法，傳入一個"2d"的參數，表示是繪製一個2D繪圖環境。當然，我們還需要進行一次功能測試，才能開始繪製它。

var canvas = document.getElementById("de");if(canvas.getContext){   var context = canvas.getContext("2d");}

接下來，我們還需要學習三個方法：fillRect() strokeRect() clearRect()，它們接收四個參數，分別是：X軸座標，Y軸座標，寬，高。假設我們需要繪製一個寬高50，顏色是#ccc的圖形，該如何繪製呢？例子如下：

var canvas = document.getElementById("de");if(canvas.getContext){   var context = canvas.getContext("2d");   context.fillStyle = "#ccc";   context.fillRect(0,0,50,50);}

註：fillRect繪製的是填充的長方形。如果需要繪製重疊的圖形，只需要對Y X軸座標進行設定即可。

var canvas = document.getElementById("de");if(canvas.getContext){  var context = canvas.getContext("2d");  context.strokeStyle = "#ccc";  context.strokeRect(0,0,50,50);}

註：strokeRect繪製的是邊框長方形。如果需要繪製重疊的圖形，亦是需要對Y X軸座標進行設定即可。

var canvas = document.getElementById("de");if(canvas.getContext){   var context = canvas.getContext("2d");   context.fillStyle = "#ccc";   context.fillRect(0,0,50,50);   context.fillStyle = "#933";   context.fillRect(15,15,50,50);   context.clearRect(30,30,10,10);}

註：clearRect()是清除畫布地區的一部分，用座標，以及寬高來表示。

如果，我們需要繪製一些比較複雜的圖形，那該如何？那麼就要用到一些繪製路徑的方法。首先第一步，還是需要先建立一個新的路勁，調用它beginPach()，表示建立新路徑開始。於是，我們還需要學習一些繪製路徑的方法。

arc()

arcTo()

bezierCurveTo()

lineTo()

moveTo()

quadraticCurveTo()

rect()

下面，我寫一個例子：

var canvas = document.getElementById("de");if(canvas.getContext){   var context = canvas.getContext("2d");//新路徑建立   context.beginPach();//繪製圓   context.arc(100,100,99,0,2*Math.PI,false);//arc有六個參數，xy是繪製中心點在100 100的弧，然後半徑為99。//角度是在0和2*Math.PI之間，逆時針方向。     //繪製外圓   context.moveTo(194,100);//意思是把游標移動到194 100的這個座標上，但是不繪製線條。   context.arc(100,100,94,0,2*Math.PI,false);  //繪製時針  context.moveTo(100,100);  context.lineTo(100,15);//從最後一點移動到100 15這個座標上，然後繪製一條直線//路徑描邊 context.stroke();}//在路徑建立好之後，還有一些可以用的方法，比如closePath() fill() stroke() //clip()，在fill()與stroke()中，還可以使用fillStyle()以及strokeStyle()填色。

在繪製好2D圖形之後，我們會發現，圖形上只是一個很簡單的圖形，無文字或者數位表述，那麼我們還需要學習另外兩個繪製文本的方法：fillText() strokeText()

它們兩個都接收四個參數，要繪製的字串，x,y,以及像素寬度。在繪製文本中，還有三個方法，需要學習，font textAlign textBaseline。比如：

var canvas = document.getElementById("de");if(canvas.getContext){   var context = canvas.getContext("2d");//這個設定與CSS中設定字型一樣，大小、字型、格式等   context.font = "10px 微軟雅黑";//設定文字如何對齊，與CSS中text-align屬性一樣   context.textAlign = "center";//設定文字的基準，這個與CSS中的background:top;一樣   context.textBaseline = "top";//我們要繪製的字串是12，座標是X100 Y80的位置   context.fillText("12",100,80);}

在canvas中，還有一個比較好玩的東西，變換。一樣，在學習變化的時候，還需要學習幾個方法：rotate() scale() translate() transform() setTransform()

如果，我們想讓它動起來，可以使用rotate()方法，有參數。或者縮放圖片，scale()，有參數。用一個例子來說明這些方法：

var canvas = document.getElementById("de");if(canvas.getContext){   var context = canvas.getContext("2d");//旋轉中   context.translate(100,100);//將原點座標移動到100 100座標上。//旋轉弧度  context.rotate(1);//以1的弧度開始旋轉//儲存狀態  context.fillStyle = "#ccc";  context.translate(100,100);  context.save();//調用save()方法後，將把這一狀態儲存起來。//退回狀態  context.restore();}

當然，整個canvas除了繪製之外，也可以使用圖片。方法是drawImage()。

以上都是自己學習時的理解，基礎的東西，但是只有在這些基礎的方法上，通過與CSS的組合，就可以開發出各式各樣的前端互動效果了。繼續想瞭解深入的同學，就要學習HTML5 canvas這個標籤啦，更詳細的內容，還需要參閱w3c。