Canvas VS. SVG

Posted on
| Words count in article: 791

Canvas与SVG的主要区别

  1. 图像类别：Canvas是基于像素的位图，SVG基于XML的矢量图形；
  2. 渲染模式：Canvas是逐像素进行渲染，一旦绘制完成就不会被浏览器继续关注。而SVG是通过DOM操作来显示，SVG中被绘制的图形都被视为对象，若对象的属性发生变化，浏览器能自动重现图形，但当节点过多时渲染会很慢；
  3. SVG支持分层和事件，Canvas不支持，要使用库来实现；

Canvas的使用

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;">您的浏览器不支持canvas</canvas>

var canvas = document.getElementById("myCanvas");
if(canvas.getContext("2d")) {
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (10, 10, 55, 50);

  canvas.addEventListener("mousedown", function(event){
    console.log("hi");
  });
}

判断点击事件

1
2
3
4
5
6
7
8
9
10
11
function getEventPosition(event) {
  let x, y;
  if(event.layerX || event.layerY == 0){
    x = event.layerX;
    y = event.layerY;
  } else if (event.offsetX || event.offsetY == 0) {
    x = event.offsetX;
    y = event.offsetY;
  }
  return { x: x, y: y };
}

加载图片

1
2
3
4
5
6
ctx = clearRect(0,0, canvas.width, canvas.height);
const image = new Image();
image.onload = ()=>{
  ctx.drawImage(image,left,top,width, height);
};
image.src = src;

计算文字宽度及长度

1
2
3
4
5
6
function measureText(fontSize, fontFamily, fontWeight, text) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
  return context.measureText(text).width;
}

SVG的使用

基本形状

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<svg> 包裹并定义整个矢量图形
<line> 直线：x1、y1、x2、y2
<rect> 矩形：x、y、width、height
<circle>	圆形：cx、cy、r
<ellipse>	椭圆：cx、cy、rx(x 方向半径)、ry(y 方向半径)

<polyline> 创建相连折线段：points(一些列 x/y 坐标)
<polygon> 创建封闭图形：points(一系列 x/y 坐标)

<path> 通过指定 点 以及 点和点之间的线 来创建任意形状
<defs> 定义一个可复用的图形，初始情况下 <defs> 里面的内容是不可见的
<g> 将多种形状组合起来。将组合后的形状置于 <defs> 中可以让它能够被复用
<symbol> 类似于一个组合，但拥有一些额外的特性。通常被置于 <defs> 标签中便于复用
<use> 获取在 <defs> 中定义的复用对象并在 SVG 中显示出来

画笔特性

1
2
3
4
5
6
7
stroke 画笔颜色，默认为 none
stroke-width 画笔宽度，默认为 1
stroke-opacity	0.0 完全透明，1.0 完全不透明（默认）
stroke-dasharray	虚线间距，默认为 none
stroke-linecap	线头尾形状，butt（默认）、round、square
stroke-linejoin	圆形的棱角，miter（尖的，默认）、round、bevel（平的）
stroke-miterlimit	相交处显示宽度与线宽最大比例，默认为 4

填充特性

1
2
3
fill	默认为 black
fill-opacity	0.0 完全透明，1.0 完全不透明（默认）
fill-rule	nonzero（默认值）、evenodd

示例

1
2
3
4
5
6
7
8
9
10
<body>
<svg width="300px" height="300px">
  <circle cx="100" cy="100" r="60" stroke="#c3c3c3" stroke-width="5" fill="green" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" @click="svgClick">
  <polygon points="100,10 40,180 190,60 10,60 160,180" @click="domClick"
  style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;" />
</svg>
</body>

SVG实例

0%