canvas畫布

什麼是 canvas?

HTML5 <canvas> 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成.

<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。

你能夠經過多種方法使用 canvas 繪製路徑,盒、圓、字符以及添加圖像。

建立一個畫布（Canvas）

一個畫布在網頁中是一個矩形框，經過 <canvas> 元素來繪製.

默認狀況下 <canvas> 元素沒有邊框和內容。

線條屬性

• lineCap 屬性設置或返回線條末端線帽的樣式，能夠取如下幾個值： 
  「butt」 向線條的每一個末端添加平直的邊緣（默認）； 
  「round」 向線條的每一個末端添加圓形線帽； 
  「square」 向線條的每一個末端添加正方形線帽。

• lineJoin 屬性當兩條線交匯時設置或返回所建立邊角的類型，能夠取如下幾個值： 
  「miter」 建立尖角(默認)； 
  「bevel」 建立斜角； 
  「round」 建立圓角。

• miterLimit 屬性設置或返回最大斜接長度（默認爲10）。斜接長度指的是在兩條線交匯處內角和外角之間的距離。只有當 lineJoin 屬性爲 「miter」 時，miterLimit 纔有效

•  var canvas = 

      document.getElementById("canvas");    var context = canvas.getContext("2d");    //測試lineCap屬性    //設置基準線便於觀察    context.moveTo(10,10);    context.lineTo(10,200);    context.moveTo(200,10);    context.lineTo(200,200);    context.lineWidth="1";    context.stroke();    //butt    context.beginPath();    context.moveTo(10,50);    context.lineTo(200,50);    context.lineCap="butt";    context.lineWidth="10";    context.stroke();    //round    context.beginPath();    context.moveTo(10,100);    context.lineTo(200,100);    context.lineCap="round";    context.lineWidth="10";    context.stroke();    //square    context.beginPath();    context.moveTo(10,150);    context.lineTo(200,150);    context.lineCap="square";    context.lineWidth="10";    context.stroke();    //測試linJoin屬性    //miter    context.beginPath();    context.moveTo(300,50);    context.lineTo(450,100);    context.lineTo(300,150);    context.lineJoin="miter";    context.lineWidth="10";    context.stroke();    //round    context.beginPath();    context.moveTo(400,50);    context.lineTo(550,100);    context.lineTo(400,150);    context.lineJoin="round";    context.lineWidth="10";    context.stroke();    //square    context.beginPath();    context.moveTo(500,50);    context.lineTo(650,100);    context.lineTo(500,150);    context.lineJoin="bevel";    context.lineWidth="10";    context.stroke();    //測試miterLimit屬性    context.beginPath();    context.moveTo(700,50);    context.lineTo(850,100);    context.lineTo(700,150);    context.lineJoin="miter";    context.miterLimit="2";    context.lineWidth="10";    context.strokeStyle="#2913EC";    context.stroke();

• 填充樣式

   

• 線性漸變 
  使用步驟 
  （1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )建立一個線性漸變，設置起始座標和終點座標； 
  （2）grd.addColorStop( stop , color )爲線性漸變添加顏色，stop爲0~1的值； 
  （3）context.fillStyle=grd將賦值給context。

• 徑向漸變 
  該方法與線性漸變使用方法相似，只是第一步接收的參數不同 
  var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圓心的座標和圓半徑以及終點圓心的座標和圓的半徑。

• 位圖填充 
  createPattern( img , repeat-style )使用圖片填充，repeat-style能夠取repeat、repeat-x、repeat-y、no-repeat。

• 圖形變換

  平移：context.translate(x,y)，接收參數分別爲原點在x軸方向平移x，在y軸方向平移y。

  縮放：context.scale(x,y)，接收參數分別爲x座標軸按x比例縮放，y座標軸按y比例縮放。

  旋轉：context.rotate(angle)，接收參數是座標軸旋轉的角度。