canvas使用注意點總結

點評：canvas默認寬高是300、150，為避免異常，最好使用顯示屬性添加而不通過css來添加寬高，下面簡單的為大家介紹下canvas使用注意事項，感興趣的朋友可以參考下哈，希望對大家有所幫助

2、canvas默認寬高是300、150，為避免異常，最好使用顯示屬性添加而不通過css來添加寬高

3、在canvas標籤內部添加不支持canvas標籤的瀏覽器的說明

4、通過下面的js代碼也能判斷瀏覽器是否支持canvas

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

// drawing code here

} else {

// canvas-unsupported code here

}

5、canvas只支持一種基本形狀的繪製，即矩形，但是其它圖形都可以通過canvas路徑來繪製

6、繪製矩形有四個函數：rect、fillRect、strokeRect和clearRect

7、beginPath的作用用來開始一個新的路徑層，如果不加就表示在原來路徑層上繪製，下面兩段代碼效果是完全不一樣的，第一段代碼顯示兩條紅線，第二段代碼顯示一條黑線和一條紅線

var ctx = document.getElementById('cvs').getContext('2d');

ctx.beginPath();

ctx.moveTo(100.5,20.5);

ctx.lineTo(200.5,20.5);

ctx.stroke();

ctx.moveTo(100.5,40.5);

ctx.lineTo(200.5,40.5)

ctx.strokeStyle = '#f00';

ctx.stroke();

var ctx = document.getElementById('cvs').getContext('2d');

ctx.beginPath();

ctx.moveTo(100.5,20.5);

ctx.lineTo(200.5,20.5);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(100.5,40.5);

ctx.lineTo(200.5,40.5)

ctx.strokeStyle = '#f00';

ctx.stroke();

8、如果不需要路徑閉合，closePath可以不用，如果使用了fill則路徑則會自動閉合，不需要再使用closePath了

9、只要有足夠的耐性是完全可以利用貝塞爾曲線繪製任何圖形的

10、二次方曲線在火狐下存在bug，因此可以利用三次方曲線代替二次方曲線使用

11、圖像（如PNG，GIF，JPEG等）都可以引入到canvas 中，而且其它的canvas 元素也可以作為圖像的來源

12、下面是基本的canvas圖片繪製代碼，其中image 是image 或者canvas 對象，x 和y 是其在目標canvas 裡的起始坐標

drawImage(image, x, y)

下面一段代碼表示縮放圖片，width和height表示縮放的尺寸

drawImage(image, x, y, width, height)

下面一段代碼表示剪切圖片，第一個參數和其它的是相同的，都是一個圖像或者另一個canvas 的引用。其它8個參數中分別表示圖片中裁減的起始x坐標，圖片中裁減的起始y坐標，裁減區域寬度，裁減區域高度，所畫位置x坐標，所畫位置y坐標，所畫圖形寬度，所畫圖形高度，裁剪區域的尺寸是可以和所畫圖形的尺寸不一樣的，此時會縮放到所畫圖片的尺寸

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

13、strokeStyle 是用於設置圖形輪廓的顏色，而fillStyle 用於設置填充顏色。 color 可以是表示CSS 顏色值的字符串，漸變對像或者圖案對象。默認情況下，線條和填充顏色都是黑色(CSS 顏色值#000000)。

14、圖像透明度可以用globalAlpha = transparency value或者rgba顏色值來表示

15、lineWidth 屬性設置當前繪線的粗細，為解決1px線寬bug問題，採用+0.5的方式來解決

16、lineCap 屬性最左邊的線用了默認的butt 。可以注意到它是與輔助線齊平的。中間的是round 的效果，端點處加上了半徑為一半線寬的半圓。右邊的是square 的效果，端點處加上了等寬且高度為一半線寬的方塊

17、lineJoin 屬性這裡我同樣用三條折線來做例子，分別設置不同的lineJoin 值。最上面一條是round 的效果，邊角處被磨圓了，圓的半徑等於線寬。中間和最下面一條分別是bevel 和miter 的效果。當值是miter 的時候，線段會在連接處外側延伸直至交於一點，延伸效果受到下面將要介紹的miterLimit 屬性的製約

18、save 和restore 方法是用來保存和恢復canvas 狀態的，都沒有參數。 Canvas 的狀態就是當前畫面應用的所有樣式和變形的一個快照。 Canvas 狀態是以堆(stack)的方式保存的，每一次調用save 方法，當前的狀態就會被推入堆中保存起來。每一次調用restore 方法，上一個保存的狀態就從堆中彈出，所有設定都恢復。

19、transform(1, 0, 0, 1, 0, 0)參數分別表示水平方向縮放、水平方向旋轉（順時針）、垂直方向旋轉（逆時針）、垂直方向縮放、水平方向偏移量、垂直方向偏移量

setTransform(1, 0, 0, 1, 0, 0)表示重置前一個變換矩陣然後構建新的矩陣，參數作用同上

rotate(angle)，（一個半徑等於1弧度，2πr/r=弧度即360=2π，即1=π/180）

20、動畫其實就是不斷清空畫板（clearRect()），然後重繪