canvas和svg区别

ygunoil ygunoil     2023-05-02     610

关键词:

Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。

Canvas

描述:

  • 通过Javascript来绘制2D图形。
  • 是逐像素进行渲染的。
  • 其位置发生改变,会重新进行绘制。

SVG

描述:

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

比较

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

参考:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp



作者:忘尘无憾
链接:https://www.jianshu.com/p/942d219b86d0
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

SVG 和 HTML5 Canvas 有啥区别?

】SVG和HTML5Canvas有啥区别?【英文标题】:WhatisthedifferencebetweenSVGandHTML5Canvas?SVG和HTML5Canvas有什么区别?【发布时间】:2011-06-2703:38:35【问题描述】:SVG和HTML5Canvas有什么区别?他们似乎都对我做同样的事情。基本上,它们都使用... 查看详情

canvas和svg区别

参考技术ACanvas和SVG都允许您在浏览器中创建图形,但是它们在根本上是不同的。描述:描述:CanvasSVG参考:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp 查看详情

canvas和svg的区别

摘要:结合Echarts和D3,介绍Canvas和SVG各自的特点和区别Canvas和SVG是html5支持的两种可视化技术。基于这两种技术,诞生了很多可视化工具。Echarts是基于Canvas技术的可视化工具,底层封装了原生的JavaScript的绘图API。我们很容易联想... 查看详情

canvas和svg的区别

什么是Canvas?HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。什么是SVG?SVG是一种使用XML描述2D图形的语言。SVG基... 查看详情

html中svg和canvas的区别

...SVG和CANVAS两样都可以在网页上作图,那么它们有啥显著的区别吗?另外我想问:比如我先作一个圆,然后在后期要去调整大小和位置,用那个编写程序来实现这个过程更为方便?望大神解答补充问下:这两样,那个里面有类似图... 查看详情

svg与canvas的区别

内联SVG 什么是SVG指可伸缩矢量图形定义用于网格的基于矢量的图形使用XML格式定义图形是万维网联盟的标准SVG的优势可通过文本编辑器来创建和修改SVG图像可以被搜索、索引、脚本话和压缩可伸缩在任何分辨率下被高质量的... 查看详情

前端面试html—svg和canvas有什么区别?

主要有以下区别:1.canvas是H5时期才有绘图方法,而svg已经有了十多年的历史;2.canvas绘图是基于像素点,是位图,如果进行放大或缩小会失真;svg基于图形,用html标签描绘形状,放大缩小不会失真&... 查看详情

canvas与svg的区别

     1、svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布;    2、svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是真和锯齿。而c... 查看详情

canvas和svg区别

Canvas和SVG都允许您在浏览器中创建图形,但是它们在根本上是不同的。Canvas描述:通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变,会重新进行绘制。SVG描述:一种使用XML描述的2D图形的语言SVG基于XML意味着,S... 查看详情

canvas与svg的区别

canvas是画布。位图不要在style中给canvas设置宽高。会有位移差varc=document.getElementById("c1");//给c设置一个绘图环境,得到的是一个对象varcan=c.getContext("2d");svg  svg是矢量图svg绘制矢量图canvas用于绘制位图svg使用xml格式绘制图形svg要... 查看详情

canvas与svg的区别

Canvas1.canvas通过javascript来绘制2D图形。2.canvas是逐个像素进行渲染。3.在canvas中,图形绘制完成后,它就不会继续得到浏览器的关注。如果位置、大小等发生变化,那么整个canvas场景也需要重新绘制,根据变化不同,会产生一定程... 查看详情

canvas与svg区别

HTML5新特性之五——SVG绘图 Canvas绘图SVG绘图绘图类型位图矢量图缩放失真不失真颜色细节丰富不够丰富应用领域照片、游戏统计图、图标、地图内容JS绘制每个图形都是标签事件绑定不方便方便 ScalableVectorGraphiph,可缩放... 查看详情

总结:canvas与svg的区别(代码片段)

canvas(画布位图)  1.最好不要在style中给canvas设置宽高,会有位移差  2.canvas样式:  .  绘制矩形:    fillRect() 绘制一个填充的方块,默认颜色是黑色    strokeRect()绘制带边框的方块  绘制线条    mo... 查看详情

canvas画布与svg的区别

CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言。在H5中看似canvas与svg很像,但是,他们有巨大... 查看详情

svg

SVG思考:位图和矢量图的区别?csscanvas和svg又有什么区别?位图的质量是根据分辨率判定的,分辨率越大,图像画面越清晰;矢量图没有分辨率的概念。位图放大后会越来越不清晰,像马赛克一样;矢量图则不会。canvas类似于位... 查看详情

搞懂svg/canvas中nonzero和evenodd填充规则(代码片段)

...们用3个点,连成一个三角形,则这两种填充规则没什么区别,如下对比(C 查看详情

svg和canvas

1、        SVG在线制作编辑预览工具:https://www.bejson.com/ui/svg_editor/ 查看详情

3.canvas与svg的区别(代码片段)

canvas是通过javascript来绘制的2D图形canvas是控制像素来渲染的一旦渲染完成,浏览器就不会关注了,如果位置发生变化,整个场景就需要重新绘制 <canvasid="mycanvas"width="500"height="300"></canvas><scripttype="text/javascript">varc... 查看详情