Canvas 2D原理是什么

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

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

Canvas能夠成為Web繪圖標準，原因有二：其一，由于不用存儲畫出的每一個元素，所以性能更好；其二，與其他語言的二維繪圖API類似，Canvas更容易實現。

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

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

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

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

Canvas 繪圖是一種像素級的位圖繪圖技術，Canvas標簽只是在網頁中定義了一塊矩形區域，

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

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

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

所處時間的定義則不明，按需而定。

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

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

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

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

Canvas坐標系統說明

前文已經說過，Canvas的本質是一個笛卡兒坐標系統，本節將詳細說明這一點。矩形區域的左上角為坐標原點(0,0)，向右為x軸，向下為y 軸。

Canvas繪圖坐標系統如下圖所示：

Canvas繪圖坐標圖

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

Canvas屬性說明

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

fillStyle 填充屬性，主要為填充方法服務

strokeStyle 繪制屬性，主要為繪制方法服務

font 字體樣式定義

globalAlpha 圖形透明度設置

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

lineCap 線帽

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

lineCap是組合屬性，默認是miter

lineWidth 線的寬度

miterLimit 定義斜連線長度和線條寬度的最大比率，這個屬性只有當lineJoin='miter'時才有

shadowBlur 陰影模糊

shadowColor 陰影色彩

shadowOffsetX 陰影橫向偏移

shadowOffsetY 陰影縱向偏移

textAlign 文本水平對齊

textBaseline 文本垂直對齊

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

到此，相信大家對“Canvas 2D原理是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！