js畫布canvas（css3畫布）

本文目錄一覽：

• 1、JS中canvas畫布繪製中如何實現縮放，位移，旋轉
• 2、JS之使用Canvas繪圖
• 3、canvas繪製

JS中canvas畫布繪製中如何實現縮放，位移，旋轉

cxt.scale(2,2);

縮放的是整個畫布，縮放後，繼續繪製的圖形會被放大或縮小。

ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置

x： 添加到水平坐標（x）上的值

y： 添加到垂直坐標（y）上的值

發生位移後，相當於把畫布的0,0坐標 更換到新的x,y的位置，所有繪製的新元素都被影響。

位移畫布一般配合縮放和旋轉等。

context.rotate(angle); 方法旋轉當前的繪圖

注意參數是弧度（PI）

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

JS之使用Canvas繪圖

canvas 元素負責在頁面中設定一個區域，然後就可以通過 JavaScript 動態地在這個區域中繪製圖形。

要使用 canvas 元素，必須先設置其 width 和 height 屬性，指定可以繪圖的區域大小。出現在開始和結束標籤中的內容是後備信息，如果瀏覽器不支持 canvas 元素，就會顯示這些信息。

如果不添加任何樣式或者不繪製任何圖形，在頁面中是看不到該元素的。

要在這塊畫布（canvas）上繪圖，需要取得繪圖上下文。而取得繪圖上下文對象的引用，需要調用getContext() 方法並傳入上下文的名字。傳入 “2d” ，就可以取得 2D 上下文對象。

使用 toDataURL() 方法，可以導出在 canvas 元素上繪製的圖像。這個方法接受一個參數，即圖像的 MIME 類型格式，而且適合用於創建圖像的任何上下文。

取得畫布中的一幅 PNG 格式的圖像：

如果繪製到畫布上的圖像源自不同的域， toDataURL() 方法會拋出錯誤。

使用 2D 繪圖上下文提供的方法，可以繪製簡單的 2D 圖形，比如矩形、弧線和路徑。2D 上下文的坐標開始於 canvas 元素的左上角，原點坐標是(0,0)。

2D 上下文的兩種基本繪圖操作是填充和描邊。填充，就是用指定的樣式（顏色、漸變或圖像）填充圖形；描邊，就是只在圖形的邊緣畫線。大多數 2D 上下文操作都會細分為填充和描邊兩個操作，而操作的結果取決於兩個屬性： fillStyle 和 strokeStyle 。

這兩個屬性的值可以是字符串、漸變對象或模式對象，而且它們的默認值都是 “#000000” 。如果為它們指定表示顏色的字符串值，可以使用 CSS 中指定顏色值的任何格式，包括顏色名、十六進制碼、rgb 、 rgba 、 hsl 或 hsla 。

與矩形有關的方法包括 fillRect() 、strokeRect() 和 clearRect() 。這三個方法都能接收 4 個參數：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度。這些參數的單位都是像素。

fillRect() 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色通過 fillStyle 屬性指定：

strokeRect() 方法在畫布上繪製的矩形會使用指定的顏色描邊。描邊顏色通過 strokeStyle 屬性指定。

描邊線條的寬度由 lineWidth 屬性控制，該屬性的值可以是任意整數。另外，通過 lineCap 屬性可以控制線條末端的形狀是平頭、圓頭還是方頭（ “butt” 、”round” 或 “square” ），通過 lineJoin 屬性可以控制線條相交的方式是圓交、斜交還是斜接（ “round” 、 “bevel” 或 “miter” ）。

clearRect() 方法用於清除畫布上的矩形區域。本質上，這個方法可以把繪製上下文中的某一矩形區域變透明。

通過路徑可以創造出複雜的形狀和線條。要繪製路徑，首先必須調用 beginPath() 方法，表示要開始繪製新路徑。然後，再通過調用下列方法來實際地繪製路徑。

如果想繪製一條連接到路徑起點的線條，可以調用closePath() 。如果路徑已經完成，你想用 fillStyle 填充它，可以調用 fill() 方法。另外，還可以調用 stroke() 方法對路徑描邊，描邊使用的是 strokeStyle 。最後還可以調用 clip() ，這個方法可以在路徑上創建一個剪切區域。

繪製一個不帶數字的時鐘錶盤：

isPointInPath() 方法接收 x 和 y 坐標作為參數，用於在路徑被關閉之前確定畫布上的某一點是否位於路徑上。

繪製文本主要有兩個方法： fillText() 和 strokeText() 。這兩個方法都可以接收 4 個參數：要繪製的文本字符串、x 坐標、y 坐標和可選的最大像素寬度。

兩個方法都以下列 3 個屬性為基礎：

fillText() 方法使用fillStyle 屬性繪製文本， strokeText() 方法使用 strokeStyle 屬性為文本描邊。

通過上下文的變換，可以把處理後的圖像繪製到畫布上。2D 繪製上下文支持各種基本的繪製變換。創建繪製上下文時，會以默認值初始化變換矩陣，在默認的變換矩陣下，所有處理都按描述直接繪製。為繪製上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產生不同的結果。

把原點變換到錶盤的中心：

使用 rotate() 方法旋轉時鐘的錶針：

可以調用 save() 方法，調用這個方法後，當時的所有設置都會進入一個棧結構，得以妥善保管。調用 restore() 方法，在保存設置的棧結構中向前返回一級，恢復之前的狀態。

save() 方法保存的只是對繪圖上下文的設置和變換，不會保存繪圖上下文的內容。

可以使用 drawImage()方法把一幅圖像繪製到畫布上。

以使用三種不同的參數組合。最簡單的調用方式是傳入一個 HTML img 元素，以及繪製該圖像的起點的 x 和 y 坐標。

如果想改變繪製後圖像的大小，可以再多傳入兩個參數，分別表示目標

寬度和目標高度。通過這種方式來縮放圖像並不影響上下文的變換矩陣。

繪製出來的圖像大小會變成 20×30 像素。

可以選擇把圖像中的某個區域繪製到上下文中。 drawImage() 方法的這種調用方式總共需要傳入 9 個參數：要繪製的圖像、源圖像的 x 坐標、源圖像的 y 坐標、源圖像的寬度、源圖像的高度、目標圖像的 x 坐標、目標圖像的 y 坐標、目標圖像的寬度、目標圖像的高度。這樣調用drawImage() 方法可以獲得最多的控制。

2D 上下文會根據以下幾個屬性的值，自動為形狀或路徑繪製出陰影。

要創建一個新的線性漸變，可以調用 createLinearGradient() 方法。這個方法接收 4 個參數：起點的 x 坐標、起點的 y 坐標、終點的 x 坐標、終點的 y 坐標。調用這個方法後，它就會創建一個指定大小的漸變，並返回

CanvasGradient 對象的實例。

創建了漸變對象後，下一步就是使用 addColorStop() 方法來指定色標。這個方法接收兩個參數：色標位置和 CSS 顏色值。色標位置是一個 0（開始的顏色）到 1（結束的顏色）之間的數字。

為了讓漸變覆蓋整個矩形，而不是僅應用到矩形的一部分，矩形和漸變對

象的坐標必須匹配才行。

要創建徑向漸變（或放射漸變），可以使用 createRadialGradient() 方法。這個方法接收 6 個參數，對應着兩個圓的圓心和半徑。前三個參數指定的是起點圓的原心（x 和 y）及半徑，後三個參數指定的是終點圓的原心（x 和 y）及半徑。

模式其實就是重複的圖像，可以用來填充或描邊圖形。要創建一個新模式，可以調用createPattern() 方法並傳入兩個參數：一個 HTML img 元素和一個表示如何重複圖像的字符串。其中，第二個參數的值與 CSS 的 background-repeat 屬性值相同，包括 “repeat” 、 “repeat-x” 、”repeat-y” 和 “no-repeat” 。

createPattern() 方法的第一個參數也可以是一個 video 元素，或者另一個 canvas 元素。

2D 上下文的一個明顯的長處就是，可以通過 getImageData() 取得原始圖像數據。這個方法接收4 個參數：要取得其數據的畫面區域的 x 和 y 坐標以及該區域的像素寬度和高度。

取得左上角坐標為(10,5)、大小為 50×50 像素的區域的圖像數據：

返回的對象是 ImageData 的實例。每個 ImageData 對象都有三個屬性： width 、 height 和data 。其中 data 屬性是一個數組，保存着圖像中每一個像素的數據。

在 data 數組中，每一個像素用4 個元素來保存，分別表示紅、綠、藍和透明度值。

數組中每個元素的值都介於 0 到 255 之間（包括 0 和 255）。

還有兩個會應用到 2D 上下文中所有繪製操作的屬性： globalAlpha 和 globalCompositionOperation 。其中， globalAlpha 是一個介於 0 和 1 之間的值（包括 0和 1），用於指定所有繪製的透明度。默認值為 0。如果所有後續操作都要基於相同的透明度，就可以先把 globalAlpha 設置為適當

值，然後繪製，最後再把它設置回默認值 0。

第二個屬性 globalCompositionOperation 表示後繪製的圖形怎樣與先繪製的圖形結合。

WebGL 是針對 Canvas 的 3D 上下文。

WebGL是從 OpenGL ES 2.0 移植到瀏覽器中的，而 OpenGL ES 2.0 是遊戲開發人員在創建計算機圖形圖像時經常使用的一種語言。WebGL 支持比 2D 上下文更豐富和更強大的圖形圖像處理能力。

WebGL 涉及的複雜計算需要提前知道數值的精度，而標準的 JavaScript 數值無法滿足需要。為此，WebGL 引入了一個概念，叫類型化數組（typed arrays）。類型化數組也是數組，只不過其元素被設置為特定類型的值。

類型化數組的核心就是一個名為 ArrayBuffer 的類型。每個 ArrayBuffer 對象表示的只是內存中指定的字節數，但不會指定這些字節用於保存什麼類型的數據。通過 ArrayBuffer 所能做的，就是為了將來使用而分配一定數量的字節。

創建了 ArrayBuffer 對象後，能夠通過該對象獲得的信息只有它包含的字節數，方法是訪問其byteLength 屬性：

使用 ArrayBuffer （數組緩衝器類型）的一種特別的方式就是用它來創建數組緩衝器視圖。其中，最常見的視圖是 DataView ，通過它可以選擇 ArrayBuffer 中一小段字節。為此，可以在創建 DataView實例的時候傳入一個 ArrayBuffer 、一個可選的字節偏移量（從該字節開始選擇）和一個可選的要選擇的字節數。

實例化之後， DataView 對象會把字節偏移量以及字節長度信息分別保存在 byteOffset 和byteLength 屬性中。

類型化視圖一般也被稱為類型化數組，因為它們除了元素必須是某種特定的數據類型外，與常規的數組無異。

類型化數組是 WebGL 項目中執行各種操作的重要基礎。

目前，主流瀏覽器的較新版本大都已經支持 canvas 標籤。同樣地，這些版本的瀏覽器基本上也都支持 2D 上下文。但對於 WebGL 而言，目前還只有 Firefox 4+和 Chrome 支持它。

canvas繪製

在html創建一個canvas畫布

canvas id=”canvas” ref=”Canvas” /

使用js語句繪製畫布

其他方法：

fillText(text,x,y):在畫布上繪製實心文本；

strokeText(text,x,y):在畫布上繪製空心文本；

fillStyle():設置或返回用於填充繪畫的顏色、漸變或模式

fillRect(x,y,width,height) :繪製“被填充”的矩形.如 fillRect 方法擁有參數 (0,0,200,100)。即在畫布上繪製 200×100 的矩形，從左上角開始 (0,0)。