Canvas 和 SVG 的区别是什么？

首先简单说一下Canvas

canvas是H5中新增的标签，官方解释说canvas是一块画布，可以在网页中绘制图像，话不多说，来个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> /*在使用canvas时候，不可用css来定义canvas的宽度因为当画布缩放的同时，内部的图像也会随之缩放，这是就会出现图像失真的情况*/canvas{background-color: #aaa;} </style>
</head>
<body><canvas width="500" height="500">浏览器不支持canvas</canvas> //这就是canvas标签，当浏览器不支持canvas标签的时候就会在浏览器展示出浏览器不支持canvas这段话<script> var canvas = document.querySelector("canvas")//绘图环境var ctx = canvas.getContext("2d")function img(){//ctx.drawImage(图像对象，坐标，宽高)var imgObj = new Image() //new一个图像对象imgObj.src="./img.jpg"//在这里要注意，一点要在imgObj.onload内部再使用ctx.drawImage,否则会画图失败imgObj.onload = function (){ctx.drawImage(imgObj,100,100,300,300)}// ctx.drawImage(imgObj,100,100,300,300)}img() </script>
</body>
</html>

再了解一下svg

svg即可缩放矢量图形，什么是矢量图形呢，也就是放大或者缩小不会失真的图形。svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形。

区别

Canvas 主要是用笔刷来绘制 2D 图形的。
SVG 主要是用标签来绘制不规则矢量图的。
相同点：都是主要用来画 2D 图形的。
不同点：Canvas 画的是位图，SVG 画的是矢量图。
不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。

Canvas 和 SVG 的区别是什么？相关推荐

Canvas VS . SVG
SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SV ...
HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
080_html5 Canvas和SVG
1. Canvas和SVG都允许您在浏览器中创建图形, 但是它们在根本上是不同的. 2. SVG 2.1. SVG是一种使用XML描述2D图形的语言. 2.2. SVG基于XML, 这意味着SVG D ...
H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以".svg"为后缀的文件在浏览器中打开显 ...
Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0
Canvas 和 SVG 是两大基于浏览器的渲染方案,在选择图表库的时候,用户有时也会在这两者之间纠结.但是纠结的时候,你是否真的明白这两者在哪些方面有优劣? ECharts 4.0 推出 Canva ...
HTML5 Canvas vs. SVG vs. div
本文翻译自:HTML5 Canvas vs. SVG vs. div What is the best approach for creating elements on the fly and be ...
canvas webGL SVG 比较
https://blog.csdn.net/Thea12138/article/details/79723380 对每个类型的封装库:https://blog.csdn.net/u010513603/ ...
html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
HTML画布与SVG（Canvas vs. SVG）
目录画布(Canvas) 什么是 Canvas? 创建 Canvas 元素通过 JavaScript 来绘制理解坐标更多 Canvas 实例实例 - 线条实例 - 圆形实例 - 渐变实 ...
HTML5的图像系统Canvas与SVG
在HTML5之前,没有标准的提供可供Javascript脚本调用的图像系统,以前的做法通常是通过Div来画点.线.矩形这种非常"笨"的办法来变相的绘图,虽然很"笨&quo ...

Canvas 和 SVG 的区别是什么？

首先简单说一下Canvas

再了解一下svg

区别

Canvas 和 SVG 的区别是什么？相关推荐

最新文章

热门文章