Canvas和SVG

Canvas

Canvas是HTML5新增的元素，通过使用JS来在特定的区域绘制图形，也可以处理和渲染视频。

Canvas的基本语法

1

Canvas的默认值为：width:300px,height:150px。也可以使用CSS来设置宽高，但是如宽高属性和初始比例不一致，它也会出现扭曲，所以不建议使用CSS来设置Canvas的宽高。

绘制grid和坐标空间

Canvas元素默认被网格所覆盖，网格中的一个单元相当于Canvas元素中的一个像素。栅格的起点为左上角，坐标为（0， 0）。所有元素的位置都相对于原点来定位。

Canvas只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径（Path）。不过，我们拥有众多路径生成让复杂图形的绘制成为了可能。

Canvas提供了三种方法绘制图形：

• fillRect(x,y,width,height)绘制一个填充的矩形
• strokeRect(x,y,width,height)绘制一个矩形的边框
• clearRect(x,y,width,height)清楚一定的矩形区域

Path

图形的基本元素是路径。路径是通过不同颜色、不同宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形需要一些额外的步骤：

• 创建路径起始点
• 调用绘制方法来绘制出路径
• 把路径封闭
• 一旦路径生成，通过描边或填充路径区域来渲染图形

需要使用到的方法：

• beginPath：新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
• moveTo（x, y）：设置路径的起始位置
• lineTo(x, y)：线条结束的坐标
• closePath()：闭合路径之后，图形绘制命令会重新指向到上下文
• stroke()：通过线条来绘制图形的轮廓
• fill()：填充图形

口语化总结

Canvas是一个画布，可以在网页中绘制所需的图形，Canvas只是一个画布，所有的绘制操作都要在JS中进行，Canvas是一个二维网格，网格中一个单元相当于Canvas元素中的一个像素。Canvas左上角的坐标为（0，0），叫做原点，所有元素的位置都相对于原点来定位。Canvas的基本元素是路径，路径是由不同颜色、不同宽度的线段或曲线相连而成的不同形状的点的集合。路径三个基本函数moveTo、lineTo、stroke。使用Canvas可以绘制圆形（arc）、直线（lineTo）、文本（fillText）等。

如何用Canvas绘制一条简单的线

  
  
    你的浏览器不支持Canvas
  

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用SVG和Canvas画一个矩形

  
  
    你的浏览器不支持Canvas
  

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

SVG和Canvas的区别

SVG是可缩放矢量图，即使放大缩小也不会造成图像失真，使用SVG绘图时，每个图形都是以DOM节点的形式插入到页面中的，可以通过JS来直接操作这些图形。

• SVG是使用xml文档描述来绘图，更适合做动态交互；Canvas使用JS绘图，更适合频繁重绘的场景
• SVG不依赖分辨率；Canvas依赖分辨率
• SVG支持事件处理；Canvas不支持
• SVG适合带有大型渲染区域的应用程序（例如谷歌地图）；Canvas对象适合被频繁重绘的场景，比如游戏
• SVG渲染速度慢，因为它使用DOM进行操作，还需要记录坐标；Canvas不需要记住以后的事情，渲染速度快
• 绘制时交互过多选SVG；绘图效率高选Canvas