HTML5 Canvas 第二篇

  書接上文,原諒我寫博客新手,並且還是這種總結性的文章.雖然是自己的學習筆記,但也不能這麼潦草.這篇開始,好好排版,刪掉廢話.歸納總結爲主.

  首先,回顧一下.

  頁面中加入的canvas

  <canvas id="diag" style="border:1px solid" width="200" height="200"> 
  </canvas>

  相應的繪製對角線的JS代碼

function draw(){
  var canvas = document.getElementById('diag');
  var context = canvas.getContext('2d');
  
  context.beginPath();
  context.moveTo(70,140);
  context.lineTo(140,70);
  
  context.stroke();
}
window.addEventListener("load", draw, true);

  所呈現的圖像

 OK,這次主要是用一下變換的方式來重新繪製一下.並且用路徑繪出樹,用曲線繪製出跑道. 

 2.1 變換

修正---在繪製系統中的說法就是變換.可以將變換當做介於開發人員發出的指令和canvas顯示結果之間的一個修正層.不管開發時是否需要,他都是存在的.

  在應用時可以被順序應用、組合或者隨意覆蓋.關於可重用代碼有一條重要的建議:一般繪製都應從原點(0,0)開始,應用變換(縮放、平移、旋轉等),然後不斷修改代碼直至達到希望的效果.

  代碼:用變換的方式在canvas上繪製對角線

function draw(){
  var canvas = document.getElementById('diag');
  var context = canvas.getContext('2d');
  //保存當前繪圖狀態
  context.save();
  //想右下方移動繪圖上下文
  context.translate(70,140);
  //以原點爲起點,繪製與前面相同的線段
  context.beginPath();
  context.moveTo(0,0);
  context.lineTo(70,-70);
  
  context.stroke();
}

  從第三句開始講,保存未修改的context,這樣即使進行了繪製和變換,也可以恢復到初始的狀態.

  下一步,translate函數的調用是當平移行爲發生時,我們提供的變換座標會被加到結果座標(對角線)上去,結果就是將要繪製的對角線移動到了新的位置上.不過是在繪製操作結束之後.

  應用平移後的繪製.

  繪製後的對角線和前面的一模一樣.

2.2 路徑

顧名思義就是繪製一條線條.路徑可以代表你所想在canvas上呈現的任何圖像,可以要多複雜就有多複雜,多線條、曲線段、甚至是子路徑.

  講一下那三個最常調用也是這節要繪製樹冠輪廓的函數.

  beginPath() 就是用來通知canvas將要開始繪製一個新的圖形了.canvas需要據此來計算圖形的內部和外部範圍,以便完成後續的填充和描邊.

  movaTo(x,y) 不繪製,只是將當前位置移動到新目標上(x,y)

  lineTo(x,y) 不僅將當前位置移動到新的目標(x,y),而且要在兩個座標之間畫一條直線.

  接下來,講一個特殊的路徑函數 closePath() 和lineTo很像,唯一的差別就是closePath會將路徑的起始座標作爲目標座標.還會通知canvas當前繪製的圖像已經閉合或者形成了完全封閉的區域.若想繪製子路徑,就可以在調用beginPath重新繪製新路徑並完全清除之前的所有路徑.

  代碼:繪製樹冠的輪廓

function createPath(context){
  
  context.beginPath();
  //繪製樹冠
  context.moveTo(-25,-50);
  context.lineTo(-10,-80);
  context.lineTo(-20,-80);
  context.lineTo(-5,-110);
  context.lineTo(-15,-110);
  //樹的頂點
  context.lineTo(0,-140);
  
  context.lineTo(15,-110);
  context.lineTo(5,-110);
  context.lineTo(20,-80);
  context.lineTo(10,-80);
  context.lineTo(25,-50);
  //連接起點,閉合路徑
  context.closePath();
}

  代碼:在canvas上繪製樹的輪廓

function draw(){
  var canvas = document.getElementById('diag');
  var context = canvas.getContext('2d');
  
  context.save();
  context.translate(130,250);
  //創建表現樹冠的路徑
  createPath(context);
  //繪製當前路徑
  context.stroke();
  context.restore();
}

  還是先獲取canvas的上下文對象,保存以便後使用,將當前位置變換到新位置,畫樹冠,繪製到canvas上,最後恢復上下文的初始對象.

  如圖:

  2.3 描邊樣式

  先上代碼:使用描邊樣式

  //加寬線條
  context.lineWidth = 4;
  //平滑路徑的結合點
  context.lineJoin = 'round';
  //將顏色改爲棕色
  context.strokeStyle = '#663300';
  //最後,繪製樹冠
  context.stroke();

  首先,將線條寬度加粗到4像素.其次,將lineJoin屬性設置爲round,修改當前形狀中線段的連接方式(還有 bevel、miter).最後,通過strokeStyle屬性改變線條的顏色(還可以用於生成特殊效果的圖案或漸變色).

  還有一個屬性 lineCap 屬性值爲:butt,square,round.以此來制定線條末端的樣式.

  如圖:

2.4 填充

  代碼:使用填充樣式

  //將綠色填充樹冠
  context.fillStyle = '#339900';
  context.fill();

 fill函數就可以讓canvas對當前圖形中所以的閉合路徑內部的像素點進行填充,效果如下:

 

  由於我們是先描邊後填充,所以填充會覆蓋一部分描邊路徑.填充就是把路徑輪廓內部的所以像素全部填充,所以會覆蓋描邊路徑的一半.如果希望看到完整路徑,可以在繪製路前填充.

  代碼:填充矩形區域

  //棕色爲填充色
  context.fillStyle = '#663300';
  //填充用作樹幹的矩形區域
  context.fillRect(-5,-50,10,50);

  效果如圖:

  

  這次和上次不一樣的是,我們不用lineTo畫出邊角,而是使用fillRect一步到位畫出整個樹幹.fillRect(x,y,w,h) (x,y)是點座標,w寬度,h高度. 與這個函數差不多的還有strokeRect(基於給出的位置畫出矩形的輪廓)、clearRect(清除矩形域內的所以內容並將它恢復到初始狀態,即透明色).

  2.5 繪製曲線

我們使用最簡單的曲線函數--二次函數,來繪製小路.

  代碼:繪製曲線

  //保存之前的狀態並繪製路徑
  context.save();
  
  context.translate(-10,350);
  context.beginPath();
  //第一條曲線向右上方彎曲
  context.moveTo(0,0);
  context.quadraticCurveTo(170,-50,260,-190);
  //第二條曲線向右下方彎曲
  context.quadraticCurveTo(310,-250,410,-250);
  //使用棕色的粗線來繪製路徑
  context.strokeStyle = '#663300';
  context.lineWidth = 20;
  context.stroke();
  //恢復狀態
  context.restore();

quadraticCurveTo函數繪製曲線的起點是當前座標.帶有兩組參數,第二組是指曲線的終點.第一組代表控制點(control point).所謂的控制點位於曲線的旁邊(不在曲線之上),其作用相當於對曲線產生一個拉力.通過調整控制點的位置,就可以改變曲線的曲率.

 效果如圖:

 好吧,就到這了先,洗洗睡了.

To Be Continue ... ...