HTML5 canvas易錯點

標籤：style   blog   http   color   ar   使用   sp   strong   on   

　　一、畫布的預設寬高

　　<canvas id="myCanvas" style="border:1px solid black;">
　　　　你的瀏覽器不支援html5
　　</canvas>

　　通過Firefox瀏覽器訪問，看到

　　

　　通過工具發現，矩形的寬為300 高為150。但是我在w3school中看到的資訊室說canvas預設寬高都為300

　　

　　不過不是我要討論的東西，可先忽略。

　　我們知道canvas只是html的一個新標籤。因此，我們也可以用css來修改canvas畫布的寬高大小。

　　但是，除非特殊情況，一定不要用css來定義Canvas的寬高。

　　兩者的區別，在於:

　　Canvas自身的寬高就是畫布本身的屬性，而css給他的寬高則可以看作是縮放.

　　代碼例子:

　　

　　這是通過js來設定畫布canvas的寬高，在保持文本設定不變的情況下，修改width以及height,會發現，文本處於不變的狀態。

　　

　　這是通過css來設定畫布canvas的寬高，在保持文本設定不變的情況下，修改width以及height,會發現，文本會隨著設定而變化，而且有了縮放的感覺。

　　

　　二、canvas畫布只能共用一支畫筆

　　在前面已經提到，在有了畫布的情況下，我們要對畫布進行操作，則需要畫筆來進行。

　　canvas擷取畫筆 var ctx = c.getContext("2d");

　　我剛開始的時候，認為反正getContext只是方法。所以多調用幾次，就可以整出多幾隻筆出來。比如:

　　var ctx = c.getContext("2d");

　　var ctx1 = c.getContext("2d");

　　後來通過瀏覽器訪問時，oh my god。不行啊。

　　代碼例子:

　　

　　運行結果圖:

　　

　　從這裡，我們就可以知道，canvas只能共用一支畫筆。如果你需要畫出不同的顏色，辦法就是把這隻唯一的“筆”不停的蘸上新顏色哦。^_^

 

　　三、路徑問題即beginPath方法使用

　　在進行線條或者圖形繪製時，最好在開頭開始beginPath

　　在學習canvas的線條或者矩形線條的使用時，我感到奇怪的是，有些案例，每畫一條線條，在開始時都會使用beginPath作為開頭，而有些案例，則沒有。真夠坑的。

看了手冊的解釋說是，開啟一條新的路徑。那麼它有什麼重要的？

　　代碼例子:

　　

　　訪問結果圖:

　　

　　從結果圖，可以看出

　　1、結果不是一紅 一黃。

　　2、第一條線條被描繪了兩次。

　　如何理解這個結果.

　　我的理解是，我用手在畫板上，用一支紅色的筆畫出一線條。然後，用一支黃色的筆再畫出另一線條。那麼，為什麼我不會對第一條再次繪製呢？這是因為我知道，這兩條線條是不同的。因此，我不會。而電腦不知道，它無法區別這兩條線條是不是同一的。而要如何進行區別呢？就要用到beginPath。否則的話，canvas中的繪製方法，都會以“上一次beginPath”之後的所有路徑為基礎進行繪製了。

　　啟用beginPath也有個好處，就是提高效能。否則，就會對之前的線條進行重新繪製了。

　　

HTML5 canvas易錯點