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
```