1、使用canvas元素
HTML5新增了一个<canvas.../>元素，该元素专门用于绘制图形。但实际上<canvas.../>元素自身并不绘制图形，它只是相当于一张空画布。必须要用javascript脚本进行绘制。
在html页面上定义<canvas.../>与定义其它普通元素并无任何不同，为了向<canvas.../>元素上绘图，必须经过如下三个步骤：
1、获取<canvas.../>元素对应的dom对象，这是一个canvas对象。
2、调用canvas对象的getContext方法，该方法返回一个CanvasRenderingContext2D对象，该对象可以绘制图形。
3、调用CanvasRenderingContext2D对象的方法绘图。
以下为示例代码：
<html>
<body>
<h2>画图入门</h2>
<canvas id="mc" width="300" height="180" style="border:1px solid black"></canvas>
<script>
var canvas=document.getElementById("mc");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(30,40,80,100);
</script>
</body>
</html>
运行效果如下：
