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