關於canvas的一些理解記錄一下

基本用法

元素看起來和元素很相像，唯一的不同就是它並沒有 src 和 alt 屬性。實際上，標籤只有兩個屬性 —— width 和 height。這些都是可選的，並且同樣利用 dom properties 來設定。當沒有設定寬度和高度的時候，canvas會初始化寬度為300畫素和高度為150畫素。該元素可以使用css來定義大小，但在繪製時影象會伸縮以適應它的框架尺寸：如果css的尺寸與初始畫布的比例不一致，它會出現扭曲。

注意: 如果你繪製出來的影象是扭曲的, 嘗試用 width 和 height 屬性為明確規定寬高，而不是使用css。

id屬性並不是元素所特有的，而是每乙個html元素都預設具有的屬性（比如class屬性）。給每個標籤都加上乙個id屬性是個好主意，因為這樣你就能在我們的指令碼中很容易的找到它。

元素可以像任何乙個普通的影象一樣（有margin，border，background等等屬性）被設計。然而，這些樣式不會影響在canvas中的實際影象。我們將會在乙個專門的章節裡看到這是如何解決的。當開始時沒有為canvas規定樣式規則，其將會完全透明。

替換內容

元素與標籤的不同之處在於，就像，，或者元素一樣，很容易定義一些替代內容。由於某些較老的瀏覽器（尤其是ie9之前的ie瀏覽器）或者文字瀏覽器不支援html元素」canvas」，在這些瀏覽器上你應該總是能展示替代內容。

這非常簡單：我們只是在標籤中提供了替換內容。不支援的瀏覽器將會忽略容器並在其中渲染後備內容。而支援的瀏覽器將會忽略在容器中包含的內容，並且只是正常渲染 canvas。

元素不同，元素需要結束標籤()。如果結束標籤不存在，則文件的其餘部分會被認為是替代內容，將不會顯示出來。

如果不需要替代內容，乙個簡單的在所有支援 canvas 的瀏覽器中都是完全相容的。

渲染上下文（the rendering context）

元素創造了乙個固定大小的畫布，它公開了乙個或多個渲染上下文，其可以用來繪製和處理要展示的內容。我們將會將注意力放在2d渲染上下文中。其他種類的上下文也許提供了不同種類的渲染方式；比如， webgl 使用了基於opengl es的3d上下文 (「experimental-webgl」) 。

canvas 起初是空白的。為了展示，首先指令碼需要找到渲染上下文，然後在它的上面繪製。元素有乙個叫做 getcontext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getcontext() 只有乙個引數，上下文的格式。對於2d影象而言，如本教程，你可以使用 canvasrenderingcontext2d。

var canvas = document.getelementbyid(『tutorial』);

var ctx = canvas.getcontext(『2d』);

**的第一行通過使用 document.getelementbyid() 方法來為元素得到dom物件。一旦有了元素物件，你可以通過使用它的 getcontext() 方法來訪問繪畫上下文。

檢查支援性

替換內容是用於在不支援標籤的瀏覽器中展示的。通過簡單的測試 getcontext() 方法的存在，指令碼可以檢查程式設計支援性。上面的**片段現在變成了這個樣子：

var canvas = document.getelementbyid(『tutorial』);

if (canvas.getcontext) else

乙個模板骨架

這裡的是乙個最簡單的模板，我們之後就可以把它作為之後的例子的起點。

注意: 為了簡潔, 我們在html中內嵌了script元素, 但並不推薦這種做法。

canvas tutorial 上面的指令碼中包含乙個叫做draw()的函式，當頁面載入結束的時候就會執行這個函式。通過使用在文件上載入事件來完成。只要頁面載入結束，這個函式，或者像是這個的，同樣可以使用 window.settimeout()，window.setinterval()，或者其他任何事件處理程式來呼叫。

模板看起來會是這樣。如這裡所示，它最初是空白的。

乙個簡單例子

一開始，讓我們來看個簡單的例子，我們繪製了兩個有趣的長方形，其中的乙個有著alpha透明度。我們將在接下來的例子裡深入探索一下這是如何工作的。

關於canvas的一些理解記錄一下

關於爬蟲的一些記錄

關於torch的一些記錄

關於死鎖的一些記錄

關於canvas的一些理解記錄一下

關於爬蟲的一些記錄

關於torch的一些記錄

關於死鎖的一些記錄

相關推薦