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

轉載于:https://www.cnblogs.com/nunn/p/3851534.html

總結

以上是生活随笔為你收集整理的Canvas 学习笔记1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。