iT邦幫忙

DAY 10
2

且戰且走HTML5系列 第 10

且戰且走HTML5(10) Canvas 及 2D context可以做到的事情

在使用Canvas 2D Context之前,先看看他有哪些能耐。
2D Context有一些全域屬性,這些屬性會與許多繪圖的動作相關,為了方便管理,2D Context提供了一個簡單的方法:用save()就可以把目前的環境存到堆疊,然後呼叫restore()就可以取出之前放入堆疊的屬性。這是一個堆疊的操作,所以save()就相當於push的動作,restore()則相當於pop的動作。save跟restore只會影響到一些全域的屬性,跟繪圖,尤其是已繪製的圖形是沒有關係的,並不能用來做undo。

一些最常用的屬性包含:

  1. globalAlpha:影響繪製的透明度(不是Canvas的背景透明度)
  2. globalCompositionOperation:影響影像繪製到Canvas上的方式,預設是直接覆蓋,但是也可以選擇其他組合已存在影像與將繪製影像的方法,例如各種顏色運算,明度優先,xor等等。
  3. fillStyle / strokeStyle:影響圖形填色與外框繪製的風格,可以用文字指定,其實就是CSS指定顏色的語法。另外也可以指定為漸層(Gradiant)或花色(Pattern)物件
  4. lineWidth / lineCap / lineJoin / miterLimit:影響線條寬度、端點形狀、組合方式以及線段接合長度限制(需要linJoin指定為miter才有作用,舉例來說,兩個寬度5的線段以銳角接合時,接合處的長度可能會很長,miterLimit就是指定這個長度的限制)
  5. font / textAlign / textBaseline:指定字型、文字對齊方式、行的垂直對齊方式
  6. shadowOffsetX / shadowOffsetY / shadowBlur / shadowColor:指定圖形陰影的樣式,包含與圖形的偏移、模糊化程度與顏色

另外,有一些無法直接操作的屬性,例如變形矩陣,必須透過一些方法來操作,但是也屬於內建的全域屬性。

這些屬性,都可以透過save()與restore()來操作。

接下來看一些繪製方法,首先是與路徑相關的:

  1. beginPath:重設路徑,接下來的路徑會加入到同一個集合
  2. moveTo:直接移到某個點,不加入路徑。通常在開始繪製時,需要把啟始點移到指定位置,就可以用這個方法
  3. lineTo:繪製直線路徑從目前的位置到指定的位置
  4. arcTo:繪製弧線路徑從目前位置到指定位置
  5. beizierCurveTo:繪製貝茲曲線從目前位置到指定位置
  6. rect:繪製矩型
  7. arc:繪製弧形
  8. closePath:關閉路徑,要關閉才能用stroke或fill來繪製
  9. stroke:繪製路徑的線條
  10. fill:在路徑中填色
  11. clip:利用路徑當做裁切區域,不過區域必須被路徑封閉才有效

要繪製矩型的話,並不需要呼叫繪製路徑的方法,可以直接使用:

  1. fillRect:繪製實心(填色)的矩型
  2. strokeRect:繪製空心(外框)的矩型
  3. clearRect:將矩型內所有的pixel清除

另外,可以用2D Context來畫出文字:

  1. fillText:繪製實心的文字
  2. strokeText:只繪製文字外框
  3. measureText:測量指定文字的寬度(truetype的文字寬度並不固定,需要用這個方法才知道繪製出來文字的寬度)

2D Context有內建一個全域的變換矩陣,透過操作這個變換矩陣,就可以讓繪製出來的圖形做出放大、縮小、平移、旋轉、剪變等效果。改變變換矩陣並不影響已經繪製到Canvas上的圖形,只是影響到及將會至到Canvas圖形的座標系統。這些方法包括:

  1. scale:改變大小
  2. rotate:旋轉。不過預設的座標系統是已Canvas的左上角為圓點,要讓一個圖形例如矩型在原地旋轉,需要先把座標平移到指定的位置
  3. translate:平移,可以把原點移到指定位置
  4. transform:直接輸入矩陣數值來操作,除了以上效果,還可以做出剪變等變形效果
  5. transformTo:重設矩陣然後呼叫transform

除了繪圖的方法,2D Context也提供了一些快速繪圖的機制:

  1. drawImage:可以用它來將其他的Canvas、Image元素、html5的Video元素繪製到Canvas中,如果是對Video操作,就等於把影片的某個影格擷取成圖片

要做進一步的圖形處理,就需要可以取得Canvas中所有Pixel來做處理,2D Context在這方面提供幾個方法,主要是透過ImageData這個物件,他的data屬性是包含所有像素的一維陣列,每四個陣列元素可以組成一個Pixel(也就是RGBA):

  1. getImageData:從Canvas取得指定範圍的Pixel
  2. createImageData:產生一個空的ImageData
  3. putImageData:將ImageData寫回到Canvas

有一些功能沒有提到(focus ring等,不過這跟shadow有點像),但是大部分Canvas 2D Context大概都簡單介紹到了。基本上這已經涵蓋了大部分的2D繪圖需求,可以很快就實作出一些繪圖功能,要做出類似小畫家的應用也沒問題。

明天就從塗鴉開始,實作一些簡單的繪圖應用,並且把這些功能慢慢組織起來成為有彈性的繪圖框架,讓未來要整合多人協作時會更方便。


上一篇
且戰且走HTML5(9) 應用的主軸:Canvas
下一篇
且戰且走HTML5(11) Canvas基本繪圖-塗鴉
系列文
且戰且走HTML530

尚未有邦友留言

立即登入留言