1. 浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素
2. canvas基础知识：
canvas是inline-block类型。
（1）在css样式中，设置canvas样式
比如：
（2）在body标签中，创建canvas标签。
请注意，canvas标签内部有自己属性设置方式
比如：
（3）在JavaScript中，
①获取canvas，即创建canvas画布；通过id获取。
②获取canvas上下文，即获取canvas画笔；该画布是2d平面。
（4）canvas方法：画直线和描边
moveTo()：画笔的起点；
lineTo(): 一笔的终点；
lineWidth属性：设置线笔画的宽度；
strokeStyle属性：设置描边的颜色；
stroke()方法：进行描边；注意：把画笔的方法和属性都设置好后，最后进行描边绘制出来。
代码：
<style>
canvas {
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas width="200" height="200" id="canvas1"></canvas>
<script>
var oCanvas = document.getElementById('canvas1'); //获取canvas
var ctx = oCanvas.getContext('2d'); //获取canvas的上下文
ctx.moveTo(10,10);
ctx.lineTo(150,10);
ctx.lineWidth = 10;
ctx.strokeStyle = 'red';
ctx.stroke();
</script>
</body>效果：
（5）直线描边的问题：起始位置和终止位置为同一个点时，有直线宽度设置时，出现合并异常。
解决办法（1）：往回多画一笔，让终止点和起始点不在一个点上。
解决办法（2）：少一笔，终止点不到达起始点，采用闭合路径的方法。
由此引出新的方法：closePath()：闭合回路
问（1）：闭合回路后，画笔的位置在哪？
答（1）：在起始点
（6）fill()：填充方法
fill()是填充、fillStyle()是填充颜色
注意：关于线宽是向两边展开的；
fill()、stroke()方法都是作用在当前所有子路径下的；
完成一条路径后要开启新的路径，使用beginPath()方法
（7）beginPath()方法：开启一个新的路径
开启的新路劲与之前路径没有任何联系
