Canvas和SVG都是html5的新特性，它们都可以让你在浏览器中创建图像，但是它们在原理和运用上是大相径庭的。

什么是Canvas

Canvas就像一块幕布，可以利用JavaScript在上面绘制各种图形。Canvas是逐像素进行渲染的，一旦图形被绘制完成，浏览器就不会继续关注它。如果图形内容需要发生变化，那么整个场景就需要重新绘制。

Canvas使用方式

创建幕布

首先，要用<canvas>标签定义一个指定尺寸的矩形框，相当于上文所说的幕布，在这个矩形框内就可以进行图形的绘制了。

1 2	<!-- 注意要指定矩形框的尺寸 --> <canvas id="myCanvas" width="500" height="300"></canvas>

判断是否支持Canvas

幕布创建完后，就可以用JavaScript来绘制图形了。在使用Canvas前，需要用canvas.getContext来测试浏览器是否支持Canvas。

let myCanvas = document.getElementById('myCanvas');
if (canvas.getContext) {
    // 进行画图操作
} else {
    // 给予提示
    alert("你的浏览器不支持Canvas！")
}

获取画图上下文

通过getContext(‘2d’)方法得到一个2D上下文对象，之后所有的画图工作都需要通过这个对象来完成。

1	let ctx = canvas.getContext('2d');

如果需要绘制3D图形，需要通过getContext(“webgl”)来得到一个上下文对象。

Canvas坐标系统

绘制图形之前需要了解一下Canvas的坐标系统，Canvas的坐标是以矩形区域的左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位。

绘制图形

绘图上下文对象中提供了很多绘制图形的方法，可以绘制矩形，圆弧，直线等。

let myCanvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle='#FF0000';  // 设置填充颜色
ctx.fillRect(0,0,80,100); // 把(0,0)位置开始大小为80x100的矩形填充颜色

绘制文本

Canvas画布中不仅可以绘制图形，还可以绘制文本，即在指定的位置输出文本，并且可以设置文本的字体、样式、阴影等。

let myCanvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('Canvas and svg', 20, 40);

Canvas除了能绘制基本的图形和文本，还可以实现动画、缩放、滤镜和像素转换等。

什么是SVG

SVG是一种使用XML描述2D图形的语言。SVG是基于XML的，这意味着SVG DOM中的每个元素都是可用的。在SVG中，每个被绘制的图形均被视为对象，如果 SVG对象的属性发生变化，那么浏览器能够自动重现图形，不需要自己处理重绘。

SVG实例

下面是一个简单的SVG的实现。

1
2
3

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/>
</svg>

SVG图形以<svg>标签开始，这是根元素。
width和height属性设置图形的宽度和高度。version属性定义所使用的SVG版本，xmlns属性定义SVG的命名空间。
<circle>标签用来创建一个圆，cx和cy属性定义圆心的x和y坐标。如果忽略这两个属性，那么圆点会被设置为(0, 0)，r属性定义圆的半径。
stroke和stroke-width属性控制如何显示形状的轮廓。
fill属性设置图形内的颜色。

SVG的各种形状

SVG中有实现各种形状的标签。

rect标签用来创建矩形
ellipse标签可用来创建椭圆
line标签用来创建线条
polygon标签用来创建含有不少于三个边的图形
polyline标签用来创建仅包含直线的形状
以上图形的具体使用方式可以参考官方的文档，另外，SVG还可以实现各种滤镜和阴影的效果。

比较Canvas和SVG

Canvas和SVG都是html5中画图的好手，但是他们有很大的区别。
Canvas依赖分辨率，不支持时间处理器，文本的渲染能力比较弱，还需要自己处理重绘。但是Canvas能够以.png或.jpg格式保存结果图像，适合图像密集型的游戏，适用于像素处理，动态渲染和大数据量绘制的场景。
SVG功能更完善，不依赖分辨率，支持事件处理器，适合带有大型渲染区域的应用程序（比如谷歌地图），但不适合游戏应用。适合静态图片展示，高保真文档查看和打印的应用场景。