#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 = "http://www.mamicode.com/image.png";
```
这部分，这里的`canvas`指的是画布大小*`用小写的canvas表示画布`*，并不是`Canvas`这个`DOM`对象的大小*`用大写的表示DOM对象`*。这里关系到3个概念。
    - `DOM`元素`Canvas`的大小
    - `canvas`画布大小
    - `image`图片大小

那再来理解下第四行`canvas.width = image.width;`这里是让画布的高度等于图片的高度，实际上`DOM`元素`Canvas`的大小是不发生任何改变的，改变的只是画布的大小。

```
----------
  基友说
逢      屌
坑      丝
必      不
过      哭
----------
2014年7月17日 17:03:00
```