【座標變換】

1.旋轉：rotate(double angleInRadians)，按照給定的角度來旋轉座標系（弧度制），正順，負逆

2.縮放：scale(double x,double y)，在x與y方向上分別按照給定的數值來縮放座標系

3.平移：translate(double x,double y),將座標系平移到X,Y座標處

4.直接設定變換矩陣：

context.transform(a,b,c,d,e,f):在當前變換矩陣基礎上左乘Mn

context.setTransform(a,b,c,d,e,f):重置為Mn矩陣

5.canvas中的座標變換的操作變換限定在一些語句中：

context.save()

context.restore();

【座標系統】

頁面座標系，canvas本身的座標系，drawing surface座標系

1.頁面顯示的是canvas元素本身（預設為context-box部分）

2.程式碼中設定的繪製座標是針對drawing surface 的座標

3.當drawing surface 的尺寸與canvas 元素本身的尺寸不一致，瀏覽器縮放drawing surface 使之符合後者

4.為context-box框表，即將他放置於含padding.border的邊框盒內

5.預設canvas座標系統，以canvas的左上角為原點，x座標向右方向增長，而y座標則向右下方向延伸

6.js中設定的繪製座標針對context-box區域

7.context-box的位置可藉助於邊框盒（含padding，border）的位置計算

8.確定context-box的位置（邊框盒尺寸）

 獲取邊框盒(返回區域性座標系的原點)：var bbox=canvas.getBoundingClientRect();

 邊框盒左上角座標：var bboxLeft=bbox.left;var bboxTop=bbox.top;

 邊框盒大小：寬bbox.width,高bbox.height

9. border ,padding尺寸

 利用css屬性獲取：

 var style=window.getComputedStyle(mycanvas);

 borderLeft=style.borderLeft;

 borderTop=style.borderTop;

 paddingLeft=style.paddingLeft;

 paddingTop=style.paddingTop;

【canvas尺寸設定】

1.設定canvas元素的width和height屬性

  <canvas id='mycanvas' width="300" height="200">

  </canvas>

2.CSS方式設定，CSS“行內樣式”設定：

設定canvas元素的style屬性的width和height值

<canvas  id="mycanvas" style="width:300;height:200">

</canvas>

【滑鼠座標轉換為canvas座標】

function windowToCanvas(x,y){
    //滑鼠座標轉換為canvas座標，獲取所需要數值的相關程式碼
    return{
        x:(x-bbox.left-borderLeft-paddingLeft)*(canvas.width/bbox.width),
        y:(y-bbox.top-borderTop-paddingTop)*(canvas.height/bbox.height)
    };
}
//呼叫：
loc =windowToCanvas(e.clientX,e.clientY);