一、创建canvas
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa; display:block;margin:30px auto;"></canvas> 10 <!-- 11 说明： 12 1.不建议使用css给canvas设置width和height,因为canvas不仅有画布显示的大小，还包括它内里的显示的图画的分辨率的大小 13 2.注意width和height不加单位px 14 --> 15 </body> 16 </html>
一般有两部分组成：HTML和Javascript
HTML
<canvas id="canvas"></canvas>
Javascript
1 var canvas=document.getElementByid('canvas'); 2 var context=canvas.getContext('2d'); 3 //使用context进行绘制
举例：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;"> 10 当前浏览器不支持Canvas,请更换浏览器 11 </canvas> 12 <script> 13 var canvas=document.getElementById('canvas'); 14 canvas.width=1024; 15 canvas.height=768;//也可以在这里设置width和height 16 var context=canvas.getContext('2d'); 17 //使用context进行绘制 18 </script> 19 <!-- 20 说明： 21 1.要考虑浏览器的兼容问题，在canvas标签中进行提示，当浏览器支持canvas时，里面的文字会被忽略的 22 2.对浏览器兼容的判断也可在js中进行。判断在下面代码块中进行展示 23 --> 24 </body> 25 </html>
用js提示兼容性
1 <script> 2 var canvas=document.getElementById('canvas'); 3 canvas.width=1024; 4 canvas.height=768;//也可以在这里设置width和height 5 6 if(canvas.getContext("2d")){ 7 var context=canvas.getContext('2d'); 8 //使用context进行绘制 9 }else{ 10 alert('当前浏览器不支持Canvas,请更换浏览器后再试') 11 } 12 </script>