canvas和svg都允许在浏览器上创建图形，但是根本上是不同的。

SVG

  • SVG是一种使用XML描述的2D图形
  • SVG基于XML，这意味着SVG Dom的每个元素都是可用的，可以为某个元素附加js事件处理器
  • SVG中，每个被绘制过的图形均视为对象，如果SVG对象的属性发生变化，那么浏览器可以自行重现图形
  • 画出的图形是矢量图，所以不能引入普通的图形，但是矢量图放大不会失真，所以适合做地图
  • 绘制图形一般使用标签来实现

Canvas

canvas是html5提供的新元素，而svg存在的时间长。

  • canvas通过js绘制2d图形
  • canvas是逐像素进行渲染的
  • 在Canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。
  • 画出的是标量图，引入的是jpg，png
  • 绘制图形一般通过js实现
  • canvas绘制的图形不能被搜索引擎抓取

比较

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 文本渲染力弱
  • 能够以 .png 或 .jpg 的格式保存结果图形
  • 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
  • 不适合游戏的应用
  • 复杂度高会减慢渲染的速度
  • 以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签

使用

<body>
    <!-- 创建canvas元素 -->
    <canvas id="myCanvas" onmousemove="getC(event)" onmouseout="clearC()"></canvas>

</body>
<script>
// 绘图要通过js
var c=document.getElementById("myCanvas");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符
var cxt=c.getContext("2d");
// 红色矩形
cxt.fillStyle="#FF0000"
// 在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
cxt.fillRect(0,0,150,75);
// moveto为起点，lintto为终点，第二个lineto为第二条线的终点
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

// 圆
cxt.fillStyle="yellow"
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

// 线性渐变
cxt.beginPath();
var grd=cxt.createLinearGradient(100,70,175,50);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"blue");
cxt.fillStyle=grd;
cxt.arc(100,70,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

// 插入图片，我也不知道为啥这不灵
var img=new Image();
img.src='02.jpg';
cxt.drawImage(img,0,0);

// 得到坐标
function getC(event){
    x=event.clientX;
    y=event.clientY;
    console.log("x= "+x+" y= "+y);
}
function clearC(){
    //空
}
</script>
<style>
#myCanvas{
    width: 200px;
    height: 100px;
}
</style>
</html>

图片说明