canvas是html5中引入的一個新元素，俗稱畫布，既然是畫布，當然是用來畫圖的。canvas技術指的是利用javascript操作canvas元素繪制圖形的技術，要使用canvas,一定要瀏覽器支持canvas，谷歌和火狐的支持性很好，IE8不支持。你可以參考這個網站，查看canvas的支持性：http://www.caniuse.com/#search=canvas，當然他還能查詢到css3和html5等很多web新潮技術在各瀏覽器的支持性.
如何使用canvas?
要使用canvas,一般都需要進行以下3步操作：
1，獲取canvas對象( 通過選擇器選擇canvas元素 )
2，通過canvas獲取他的上下文繪制環境( context )
3，結合javascript調用canvas的api進行圖形繪制
認識canvas的屬性：寬度與高度
canvas的默認寬度與高度:寬度:300,高度:150
1 <script> 2 window.onload = function(){ 3 var oCanvas = document.querySelector( "#cv" ); 4 console.log( 'canvas的默認寬度與高度:' + '寬度:' + oCanvas.width + ',高度:' + oCanvas.height ); 5 } 6 </script> 7 </head> 8 <body> 9 <canvas id="cv">你的瀏覽器不支持</canvas> 10 </body>
為什么要知道canvas的寬度與高度呢？ 因為在動畫和繪圖制作的過程中，經常需要重繪操作，而重繪操作需要獲取canvas的寬度與高度.
注意：canvas的寬度與高度，只能通過行間屬性或者js動態修改，不要通過樣式去修改，否則獲取到的寬度與高度不准
1 <style> 2 #cv { 3 width:600px; 4 height:400px; 5 } 6 </style> 7 <script> 8 window.onload = function(){ 9 var oCanvas = document.querySelector( "#cv" ); 10 console.log( 'canvas的默認寬度與高度:' + '寬度:' + oCanvas.width + ',高度:' + oCanvas.height ); 11 } 12 </script>
通過樣式修改canvas的寬度與高度分別為600px和400px,但是通過js通過獲取到的卻不是這個值，而是默認值。所以不要通過樣式去修改，而應該通過設置行間屬性或者js動態修改屬性：
1 <script> 2 window.onload = function(){ 3 var oCanvas = document.querySelector( "#cv" ); 4 console.log( 'canvas的默認寬度與高度:' + '寬度:' + oCanvas.width + ',高度:' + oCanvas.height ); 5 } 6 </script> 7 </head> 8 <body> 9 <canvas id="cv" width="600" height="400">你的瀏覽器不支持</canvas> 10 </body>
這樣獲取到的寬度與高度才是600px和400px.
canvas也可以通過js動態創建
1 <script> 2 window.onload = function () { 3 var oCanvas = document.querySelector("#cv"); 4 console.log('canvas的默認寬度與高度:' + '寬度:' + oCanvas.width + ',高度:' + oCanvas.height); 5 } 6 </script> 7 </head> 8 <body> 9 <script> 10 ;(function () { 11 var oCanvas = document.createElement("canvas"); 12 oCanvas.setAttribute('id', 'cv'); 13 oCanvas.width = '600'; 14 oCanvas.height = '400' 15 document.body.appendChild(oCanvas); 16 })(); 17 </script> 18 </body>