HTML5新标签svg和canvas异同SVG和canvas是两种常用的图形绘制技术，都可以在浏览器中动态创建图形 c

SVG和canvas是两种常用的图形绘制技术，都可以在浏览器中动态创建图形

canvas标签会创建一个画布，我们可以通过脚本（JavaScript）在网页中绘制2D图像

canvas使用注意点：

<canvas> 元素需要结束标签 (</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来
宽度和高度最好不要在CSS中设置，而是在元素属性上设置，当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

svg即可缩放矢量图形，放大或者缩小不会失真。svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形。

两者的不同点可以总结为如下几点

Canvas 画的是位图，SVG 画的是矢量图。
SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。