Canvas 与 SVG 的比较

CanvasSVG
依赖分辨率不依赖分辨率
不支持事件处理器支持事件处理器
弱的文本渲染能力最适合带有大型渲染区域的应用程序(比如谷歌地图)
能够以 .png 或 .jpg 格式保存结果图像复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
最适合图像密集型的游戏,其中的许多对象会被频繁重绘不适合游戏应用

简单来说svg的就像一个DOM对象,能很简单的添加点击事件等操作,canvas是完全基于js进行像素的绘制

canvas

html

<!--创建画布,默认宽高为300、150 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

js

// 先获取 canvas 元素,然后创建对象 
var c=document.getElementById("myCanvas")
var ctx=c.getContext("2d");
//绘制一个红色的矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

canvas 的width和height属性指的是画布大小,并不一定是实际的宽高,和style中的宽高可以不一样,画布会被拉伸。
api参考:canvas菜鸟教程

svg

svg在vue中的使用实例:

<!--定义svg对象,设置样式,背景图,绑定事件-->
               <svg
                  id="towerSvg"
                  :style="{position:'absolute',left:0,top:0,width:svgWidth,height:svgHeight,backgroundImage: 'url(' + projectMap + ')'}"
                  xmlns="http://www.w3.org/2000/svg"
                  version="1.1"
                  @mousedown="onmousedown"
                >
<!--用g标签分组-->
                  <g v-for="item in towerList" :key="item.id">
<!--绘制空心圆(中间填充色为透明)-->
                    <circle :cx="item.x" :cy="item.y" :r="item.radius" fill="transparent" stroke="black" />
<!--绘制线段,黑色,宽度1-->
                    <line
                      :x1="item.x"
                      :y1="item.y"
                      :x2="getX2(item)"
                      :y2="getY2(item)"
                      style="stroke:black;stroke-width:1"
                    />
                  </g>
                </svg>

api参考:svg菜鸟教程