HTML5 - canvas : line & font

Html5的新Tag中，用起來最讓我頭疼的可以算是canvas這個Tag了，所以還是乖乖的來寫學習筆記了.......

因為只需要一個畫布，所以html的部分只需要一個canvas就好。

HTML

<canvas height="300" id="canvas1" width="300"></canvas>

JQuery 1.9.1

$(function(){
  //先把畫布id存入變數中，並且宣告物件為2D類型。
  //使用jQuery時＄('#id')後面一定要接[0]，如使用JavaScript則不用另加[0]。
  var cxt=$('#canvas1')[0].getContext('2d');
  cxt.beginPath();//繪製第一個物件路徑。
  cxt.moveTo(10,10);//作畫的起始點。moveTo(x,y)
  cxt.lineTo(200,10);//從起始點算起要到下一個點的座標。lineTo(x,y)
  cxt.lineWidth=10;//線的寬度。
  cxt.lineCap='butt';//線頭的樣式，butt為切齊線段結尾點。
  cxt.strokeStyle='red';//設定線的顏色。
  cxt.stroke();//宣告這個圖形有線。
  cxt.font='20px';//設定文字大小
  cxt.fillStyle='blue';//設定繪圖物件內容物顏色，這邊只有文字會用到。
  cxt.fillText('Butt line', 210,15);//設定文字內容與座標。fillText('text',x,y)
  
  cxt.beginPath();//繪製第二個物件路徑。
  cxt.moveTo(10,30);
  cxt.lineTo(200,30);
  cxt.lineCap='round';//線頭的樣式，round為圓頭。
  cxt.stroke();
  cxt.fillText('Round line', 210,35);
  
  cxt.beginPath();//繪製第三個物件路徑。
  cxt.moveTo(10,50);
  cxt.lineTo(200,50);
  cxt.lineCap='square';//線頭的樣式，square為向外包裹的方形樣式。
  cxt.stroke();
  cxt.fillText('Square line', 210,55);
});

主要使用function :

1. getContext() - 每一個canvas都只能有一個環境設定，目前只支援2D，但未來會擴充到3D。
2. beginPath() - 開始繪製路徑，之後才可開始使用moveTo(), lineTo(), quadticCurveTo(), bezierCurveTo(), arcTo() 及arc()繪製路徑，後面必須宣告stroke()，路徑才會被繪製出來。
3. stroke() - 設定完所有繪製路徑與設定後，驅動繪製的function，一定要放在繪製設定的最尾端。
4. moveTo() - moveTo(起始x軸, 起始y軸)，繪製線條時一定要設定的起始點。
5. lineTo() - lineTo(下一個定位點的x軸, 下一個定位點的y軸)。
6. fillText() - 把填色文字寫入<canvas>，fillText('要寫入的文案',起始x軸,起始y軸)。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/eu7a82uk/