Canvas 2D原理是什么

本篇內(nèi)容主要講解“Canvas 2D原理是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Canvas 2D原理是什么”吧!

Web之前有一些常見的繪圖方式，如Adobe Flash、SVG和VML，此次HTML5元素新添加的Canvas實(shí)際上是一個(gè)位圖畫布（bitmap canvas）。與SVG不同，畫在Canvas上的元素?zé)o法進(jìn)行縮放，同時(shí)也不是DOM的一部分。

Canvas能夠成為Web繪圖標(biāo)準(zhǔn)，原因有二：其一，由于不用存儲畫出的每一個(gè)元素，所以性能更好；其二，與其他語言的二維繪圖API類似，Canvas更容易實(shí)現(xiàn)。

很多時(shí)候，大家都不太注重原理性的文章，我們希望讀者能夠擁有很強(qiáng)的動(dòng)手能力，但是我們也非常希望讀者在動(dòng)手的時(shí)候能夠明白一件事情的工作原理。因此，本章特意列出一節(jié)，簡單講解Canvas的工作原理。

眾所周知，Canvas主要是用來畫圖的，但是Canvas并不非常注重動(dòng)畫。目前世面上所有的Canvas動(dòng)畫完全取決于開發(fā)人員的水平和功力。在Canvas中沒有幀（frame）的概念，沒有精靈（sprite）的概念，很多慣用Flash做動(dòng)畫的人所熟知的概念在Canvas中都不存在。但是Canvas的無插件跨平臺運(yùn)行能力是Flash無法比擬的。

基于Canvas的繪圖并不是直接在Canvas標(biāo)記所創(chuàng)建的繪圖畫面上進(jìn)行各種繪圖操作，而是依賴畫面所提供的渲染上下文（rendering context），所有的繪圖命令和屬性都定義在渲染上下文當(dāng)中。當(dāng)使用Canvas的getContext("2d")方法時(shí)，其返回的是CanvasRenderingContext2D對象，其內(nèi)部表現(xiàn)為笛卡兒平面坐標(biāo)，并且左上角坐標(biāo)為(0, 0)。注意：在利用Canvas畫圖時(shí)，通過Canvas的ID屬性獲取相應(yīng)的DOM對象之后要做的事情就是獲取Context對象。

渲染上下文與Canvas是完全對應(yīng)存在的，無論對同一Canvas對象調(diào)用幾次getContext()方法，都將返回同一個(gè)渲染上下文對象。目前，所有支持Canvas的瀏覽器都支持2D渲染上下文。

Canvas 繪圖是一種像素級的位圖繪圖技術(shù)，Canvas標(biāo)簽只是在網(wǎng)頁中定義了一塊矩形區(qū)域，

開發(fā)者使用JavaScript完成各種圖形繪制操作。

注意 目前網(wǎng)上一些聲稱Canvas是矢量繪圖的說法是錯(cuò)誤的，無論Canvas是直接載入圖片還是繪制一個(gè)線條，其最終表現(xiàn)結(jié)果都是一個(gè)位圖，絕非有些文章所說的矢量圖，這是原理性常識，請讀者自鑒。

在所有狀態(tài)模式下繪圖都會有一個(gè)繪圖狀態(tài)，Canvas的繪圖狀態(tài)內(nèi)容很豐富。在介紹Canvas的繪圖狀態(tài)時(shí)，如果有讀者對繪圖狀態(tài)這個(gè)詞不太了解，可以借助狀態(tài)一詞的中文解釋去理解。這里，顯擺一下我們對語言的理解：狀態(tài)，就是所處的狀況，是空間和自身表現(xiàn)的描述，對狀態(tài)

所處時(shí)間的定義則不明，按需而定。

每個(gè)渲染上下文都是一個(gè)繪圖狀態(tài)的集合（堆），繪圖狀態(tài)包含變形矩陣（transform matrix）、裁剪區(qū)域（clipping region）及眾多的屬性。但是，當(dāng)前路徑和當(dāng)前位圖不是繪圖狀態(tài)的一部分，當(dāng)前路徑是持久存在的，僅能被beginPath()、closePath()復(fù)位，當(dāng)前位圖是Canvas的屬性，而非渲染上下文的。

在學(xué)習(xí)Canvas繪圖的過程中，常常會有人對Canvas的restore和save的作用理解不明，而且對繪制與擦除行為也存在疑惑，

下圖對這些疑惑給出了解釋，并對繪圖的先后關(guān)系、上下關(guān)系、合成等做了解釋。 

由此可知，最早發(fā)出的命令，在最下；堆疊后不可逆向；擦除行為是針對某一區(qū)域下所有已繪內(nèi)容的。

Canvas坐標(biāo)系統(tǒng)說明

前文已經(jīng)說過，Canvas的本質(zhì)是一個(gè)笛卡兒坐標(biāo)系統(tǒng)，本節(jié)將詳細(xì)說明這一點(diǎn)。矩形區(qū)域的左上角為坐標(biāo)原點(diǎn)(0,0)，向右為x軸，向下為y 軸。

Canvas繪圖坐標(biāo)系統(tǒng)如下圖所示：

Canvas繪圖坐標(biāo)圖

從這張圖中可以看到，生活中常用的坐標(biāo)和定位方式已經(jīng)發(fā)生變化了。在Canvas作圖概念中，沒有負(fù)坐標(biāo)，只有正坐標(biāo)。而且，坐標(biāo)的起點(diǎn)在左上角以(0,0)坐標(biāo)開始。由于起點(diǎn)是左上角，因此，任何圖形的繪制都是向右向下的。初學(xué)者容易在這個(gè)坐標(biāo)系統(tǒng)上犯錯(cuò)誤，希望大家注意這一點(diǎn)。

Canvas屬性說明

Canvas有各種屬性，這些屬性的名稱和簡單描述如下：

fillStyle 填充屬性，主要為填充方法服務(wù)

strokeStyle 繪制屬性，主要為繪制方法服務(wù)

font 字體樣式定義

globalAlpha 圖形透明度設(shè)置

globalCompositeOperation 前后繪制的圖形組合顯示的效果

lineCap 線帽

lineJoin 兩條線段連接處的樣式，它可以有3種選擇，即round、bevel和miter，與

lineCap是組合屬性，默認(rèn)是miter

lineWidth 線的寬度

miterLimit 定義斜連線長度和線條寬度的最大比率，這個(gè)屬性只有當(dāng)lineJoin='miter'時(shí)才有

shadowBlur 陰影模糊

shadowColor 陰影色彩

shadowOffsetX 陰影橫向偏移

shadowOffsetY 陰影縱向偏移

textAlign 文本水平對齊

textBaseline 文本垂直對齊

注意，上面的屬性名稱中凡是有g(shù)lobal字樣的，如globalAlpha，都是全局屬性，在使用時(shí)一定要注意先save()再restore()，即如果使用了save()方法，就一定要有restore()方法與之對應(yīng)。

到此，相信大家對“Canvas 2D原理是什么”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！