Canvas 學習筆記1

#Canvas 學習筆記1
@[Canvas,Nunn,HTML5,javascript]
##前言
相信你們多多少少都有了解過`Canvas`,這裏我就很少作解釋了，網上也充斥了這方面的知識，不少人看了以後，其實發現做用很是小，由於彷佛這些東西什麼也作不了，本着學習提高本身，造福你們，我打算把我學習`Canvas`的歷程記錄在這裏。

首先推薦你們先看看阮一峯大大寫的這個[Canvas API](http://javascript.ruanyifeng.com/htmlapi/canvas.html)，我感受挺不錯的，對於想了解`Canvas`的人來講，這些已經足夠了。深刻的學習，咱慢慢再來。

###坑爹集錦
這裏聚集了一些我所碰到的問題或者本身的理解，標題純粹的只是爲了吐槽，有說的不對的地方，望各位見諒，並予以修正。

1. 關於以前發的連接`Canvas API`的`3.1`部分
```javascript
var image = new Image(); 
image.onload = function() { 
    if (image.width != canvas.width)
        canvas.width = image.width;
    if (image.height != canvas.height)
        canvas.height = image.height;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(image, 0, 0);
} 
image.src = "image.png";
```
這部分，這裏的`canvas`指的是畫布大小*`用小寫的canvas表示畫布`*，並非`Canvas`這個`DOM`對象的大小*`用大寫的表示DOM對象`*。這裏關係到3個概念。
    - `DOM`元素`Canvas`的大小
    - `canvas`畫布大小
    - `image`圖片大小

那再來理解下第四行`canvas.width = image.width;`這裏是讓畫布的高度等於圖片的高度，實際上`DOM`元素`Canvas`的大小是不發生任何改變的，改變的只是畫布的大小。

今天新買的書到了《HTML Canvas核心技術》，網上一致好評的書。裏面`1.1.1`就有提到了，畫布大小還有元素大小。

>使用CSS來設置canvas元素的大小，與直接設置屬性相比，其差異是基於這樣一個事實的：canvas元素實際上有兩套尺寸。一個是元素自己的大小，還有一個是元素繪圖表面（drawing surface）的大小。

>**警告：瀏覽器可能會自動縮放Canvas**
    經過width與height屬性而非修改CSS來修改canvas元素的大小，這是個好辦法。若是使用CSS來修改元素的大小，同時有沒有制定canvas元素的width與height屬性，那麼，當元素大小與canvas的繪圖表面大小不相符時，瀏覽器會縮放後者，使之符合前者的大小。這樣的話，極可能會致使奇怪的、無用的效果。

```
----------
  基友說
逢      站
坑      擼
必      不
過      哭
----------
2014年7月17日 17:03:00
```