【HTML5】Canvas繪圖詳解-1

 

----->Canvas繪製基礎

1，線條繪製

1-1，線條組成的圖形和beginPath

     案例：繪製由不一樣顏色的線條組成的圖案

     

---

1-2，多邊形的填充和closePath

    案例：繪製封閉具備填充色的圖案

1，繪製封閉圖案

2，填充圖案

context.fillStyle="yellow";//定義填充色
context.fill();//執行填充操做

注意：先填充和先繪製圖案的結果是不同

---

1-3，繪製矩形

context.rect(x,y,width,heigth);//定義矩形
context.fillRect(x,y,width,height);//定義矩形並填充（無邊框）
context.strokeRect(x,y,width,height);//定義矩形並繪製（無填充）

2，線條的屬性

2-1，線條的帽子：lineCap

//javascript 語法
context.lineCap="butt|round|square";

---

2-2，線條的鏈接：lineJoin和miterLimit

//javascirpt 語法
context.lineJoin="bevel|round|miter";

 

miterLimit 最大斜接長度。

提示：只有當 lineJoin 屬性爲 "miter" 時，miterLimit 纔有效。

邊角的角度越小，斜接長度就會越大。

爲了不斜接長度過長，咱們可使用 miterLimit 屬性。

若是斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 類型來顯示

 

對於斜接長度的定義我所知道的目前有兩個版本

W3School：http://www.w3school.com.cn/tags/canvas_miterlimit.asp

斜接長度指的是在兩條線交匯處內角和外角之間的距離。

慕課網liuyubobobo：http://www.imooc.com/video/3492

遇到這樣的分歧，那就來舉例驗證吧

  var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    window.onload=function(){
        canvas.width=800;
        canvas.height=800;
        context.lineWidth=20;        
        
        context.moveTo(100,100);
        context.lineTo(500,120);
        context.lineTo(100,140); 
        context.miterLimit=21;     
        context.stroke();
        
        context.beginPath();
        context.moveTo(100,200);
        context.lineTo(500,220);
        context.lineTo(100,240);
        context.miterLimit=10;     
        context.stroke();
        //輔助線
        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(500,120);
        context.lineTo(100,140); 
        context.lineWidth=1;
        context.strokeStyle="#fff";
        context.stroke();
    };
  

View Code

以上代碼能夠獲得下面的兩個結果

由此能夠證實這兩種對斜接長度的定義都是錯誤的

因而萌發了這樣的猜測（目測是比較符合的）

 使用特殊的90度角來驗證一下是否正確

若是個人猜測正確的話那麼miterLimit要設置爲>=15，拐角纔會呈現出尖角形狀

實際結果是：

當miterLimit=1時，拐角是斜角bevel類型來顯示的；

當miterLimit=2時，拐角是尖角miter類型來顯示的；

因此該圖像的斜接長度值是在(1,2]區間內的，則個人猜測值10*2^(1/2) 也是錯誤

實在搞不清這個斜接長度是指哪裏的長度了，暫時告一段落。

3，圖形變換

3-1，translate(x,y)：從新映射畫布上的 (0,0) 位置

3-2，rotate(angle)：旋轉當前繪圖

angle:

旋轉角度，以弧度計。

如需將角度轉換爲弧度，請使用 degrees*Math.PI/180 公式進行計算。

舉例：如需旋轉 5 度，可規定下面的公式：5*Math.PI/180。

3-3，scale()：縮放當前繪圖至更大或更小

context.scale(scaleWidth,scaleHeight);

scaleWidth,scaleHeight：縮放當前繪圖的寬度/高度 (1=100%, 0.5=50%, 2=200%, 依次類推)

註釋：若是您對繪圖進行縮放，全部以後的繪圖也會被縮放。定位也會被縮放。

3-4，transform()：替換繪圖的當前轉換矩陣

有關圖形矩陣變換：http://www.cnblogs.com/TianFang/p/3920734.html

//javascript 語法
context.transform(a,b,c,d,e,f);

畫布上的每一個對象都擁有一個當前的變換矩陣。

即變換矩陣爲單位矩陣時，圖形是沒有作變換的： context.transform(1,0,0,1,0,0);

註釋：該變換會影響 transform() 方法調用以後的繪圖。

若是須要重置變換矩陣/重置後再變換可使用 setTransform() 

setTransform() 方法把當前的變換矩陣重置爲單位矩陣，而後以相同的參數運行transform();