一. SVG

SVG叫可伸缩的矢量图形，它是基于XML格式的，特点是不管放大多少倍都不会失真。它可以直接插入网页，然后用css和js控制。所以支持事件处理器

使用svg标签可以绘制圆，矩形，直线，折线，椭圆，文本等。

圆形

<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

cx,cy,r表示圆心横纵坐标，半径。fill填充色，stroke描边色，stroke-width描边宽度。

直线

<svg width="300" height="180">
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
</svg>

<polyline>标签绘制一根折线

<svg width="300" height="180">
  <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>

<polygon>标签用于绘制多边形

<svg width="300" height="180">
  <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
</svg>

二. canvas

和svg不同，canvas是基于像素进行渲染的，通过javascript进行绘制。所以一旦图形被绘制完成，就不会再得到浏览器的关注，不支持事件绑定。

<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #333">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ct=c.getContext("2d");
    ct.fillStyle="#ccc";
    ct.fillRect(5,10,150,10);
</script>

canvas标签本身并没有绘制图像的能力，是通过javascript绘制的