canvas基本用法 1.什麼是canvas(畫布) <canvas>是HTML5新增的元素，可用於通過使用JavaScript中的指令碼來繪製圖形 例如，它可以用於繪製圖形，建立動畫。<canvas>最早由Apple引入WebKit 我們可以使用<canvas>標籤來定義一個canvas元素 ----->使用<canvas>標籤時，建議要成對出現，不要使用閉合的形式。 ----->canvas元素預設具有高寬 width：300px height：150px 2.替換內容 <canvas>很容易定義一些替代內容。由於某些較老的瀏覽器（尤其是IE9之前的IE瀏覽器） 不支援HTML元素"canvas"， 但在這些瀏覽器上你應該要給使用者展示些替代內容。 這非常簡單：我們只需要在<canvas>標籤中提供替換內容就可以。 --->支援<canvas>的瀏覽器將會忽略在容器中包含的內容，並且只是正常渲染canvas。 --->不支援<canvas>的瀏覽器會顯示代替內容 3.canvas標籤的兩個屬性 <canvas>看起來和<img>元素很相像，唯一的不同就是它並沒有src和alt屬性。 實際上，<canvas>標籤只有兩個屬性——width和height。這些都是可選的。 當沒有設定寬度和高度的時候，canvas會初始化寬度為300畫素和高度為150畫素。 畫布的高寬 html屬性設定widthheight時隻影響畫布本身不影畫布內容 css屬性設定widthheight時不但會影響畫布本身的高寬， 還會使畫布中的內容等比例縮放（縮放參照於畫布預設的尺寸） 4.渲染上下文 <canvas>元素只是創造了一個固定大小的畫布，要想在它上面去繪製內容， 我們需要找到它的渲染上下文 <canvas>元素有一個叫做getContext()的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。 getContext()只有一個引數，上下文的格式 ----->獲取方式 varcanvas=document.getElementById('box'); varctx=canvas.getContext('2d'); ----->檢查支援性 varcanvas=document.getElementById('tutorial'); if(canvas.getContext){ varctx=canvas.getContext('2d'); }