html5支持canvas标签
canvas创建一个画布，通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canvas 参考手册查询
完整代码：
<!DOCTYPE html><html><head><title>画布canvas测试</title><style>body{text-align: center;}#view{/* height: 500px;width: 500px; *//* canvas的宽度和高度设置在标签内，否则线条会变粗颜色变淡 */background-color: antiquewhite;border: 1px red solid;border-radius: 25px;}</style></head><body><h1>画布canvas测试</h1><canvas id="view" width="500px" height="500px"></canvas></body><script type="text/javascript">var conv=document.getElementById("view");var ctx=conv.getContext("2d");function drawBox(x,y,color){ctx.beginPath();//开始新的路径（丢弃当前路径）ctx.lineWidth=3;//线条宽度（单位：像素）ctx.moveTo(x,y);//起点坐标ctx.lineTo(x+100,y);//设置直线路径，终点坐标ctx.lineTo(x+100,y+100);ctx.lineTo(x,y+100);ctx.lineTo(x,y);ctx.strokeStyle="red";//设置路径颜色（先设置后绘制）ctx.stroke();//绘制路径ctx.fillStyle=color;//设置填充颜色ctx.fill();//填充路径（强制闭合）}//绘制函数drawBox(20,20,"#00FF00");</script></html>
这个例子绘制了一个简单的矩形，并填充了内部颜色（具体请见注释）
特别说明：
1.canvas创建标签内设置宽度，不要在style或者外部css内设置，否则绘制时线条宽度和颜色不会正确显示
2.在canvas画布加载完后使用getContext方法创建2d对象，不论使用外部js或者内部script代码都需要放在canvas标签之后
3.beginPath方法在创建2d对象时会自动执行一次，如果需要多次绘制则每次都需要使用。
ps：个人建议只要开始绘制就使用一次（防止一次绘制时不使用没问题，多次绘制出问题忘记使用找半天原因）
