HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
用canvas容器画两条对角线：
<!DOCTYPE html><html>
<head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css">
<!--设置canvas容器背景颜色--> canvas{ background-color: #34495E; } </style> <body> <!-- canvas 容器默认
width="300px" height="150px" --> <canvas id="canvas" width="300px" height="300px"> </canvas> <script> <!--canvas画笔--> var can = document.getElementById("canvas"); var c = can.getContext("2d"); c.lineWidth=20; c.strokeStyle = "red"; c.moveTo(0,0);//起点坐标 c.lineTo(300,300);//终点坐标 c.moveTo(300,0);//下一个起点坐标 c.lineTo(0,300);//终点坐标 c.stroke();//开始画 </script> </body> </html>