Canvas和SVG对比

【前端】Canvas和SVG对比

一、Canvas和SVG前端绘图方式介绍

Canvas 的绘图方式

Canvas api 提供了一个通过js 和HTML 元素 Canvas 元素绘制图形的方式。
Canvas api 主要用于2d 图形，而同样使用canvas 的webgl api 则用于绘制一键加速的2d 和 3d 图形。

canvas 只支持两种图形的绘制，矩形和路径，其他复杂的图形是通过一条或多条路径组合而成。

路径绘制 api

• beginPath(): 拿起笔
• moveTo(x, y): 落笔
• lineTo(x, y): 从落笔处，到(x, y) 画一条直线
• stroke(): 通过线条来绘制轮廓
• fill(): 填充

Svg 的绘图方式

SVG 可伸缩矢量图形(Scalable Vector Graphics)

SVG 有一些预定义的形状元素

矩形<rect> 
圆形 <circle>
圆 <ellipse> 
线<line> 
折线 <polyline> 
多边形 <polygon> 
路径<path>

用起来和DOM元素一样

<rect width