canvas vs svg

Posted by dogcat-ux on 2021-10-24

前言

一直对于canvas和svg这二者的作用和关系一知半解,就借着博客梳理梳理,若有错误欢迎指出~

一.Canvas

Canvas是HTML5的画布,它公开了一个或多个渲染上下文。

画布本身就是张白纸,你可以移动纸张改变纸张大小(设置画布边距长宽),也可以在纸张里面绘制图像(在画布中操作)。

用法

canvas在body里面定义,用js在画布上面画画。当然canvas本身就是一个标签,所以你也可以给它设置长宽背景色等。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<canvas id="canvas"></canvas>
<script>
//获取canvas元素
const canvas = document.getElementById('canvas');
//创建context对象
const ctx = canvas.getContext('2d');
//绘制一个绿色的矩形
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>

canvas可以绘制矩形圆形等各种图像,也可以直接使用图片,canvas中使用图片必须等img完全加载后才能呈递图片。具体的画画操作不详细说明。

canvas坐标

左上角为画布原点,向右延伸为x方向,向下延伸为Y方向。(2d画布)

二.SVG

svg全称Scalable Vector Graphics,意为可缩放矢量图形

svg是一种使用XML描述2D图形的语言。那我们只能去看下xml了,xml简单介绍在下面。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

SVG in html

svg本身可以下载,并且可以用浏览器打开。

html

SVG 文件可通过以下标签嵌入 HTML 文档: 或者