svg 与canvas对比

最新推荐文章于 2023-04-09 20:32:39 发布
最新推荐文章于 2023-04-09 20:32:39 发布
阅读量731 收藏
点赞数
分类专栏： js 文章标签： canvas svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maomao_lian/article/details/35267727
版权

Canvas

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

SVG

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


关于SVG与Canvas的经典文章：http://msdn.microsoft.com/zh-cn/library/gg193983

maomao_lian
关注
专栏目录
Canvas 与 SVG 的比较
weixin_61562639的博客
07-14 2806
在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。SVG基于XML，这意味着SVGDOM中的每个元素都是可用的。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。在SVG中，每个被绘制的图形均被视为对象。知道了svg和canvas是什么之后，我们就来比较一下canvas和svg。...
Canvas和SVG对比
最新发布
qq_34510843的博客
01-23 1202
Canvas api 提供了一个通过js 和HTML 元素 Canvas 元素绘制图形的方式。Canvas api 主要用于2d 图形，而同样使用canvas 的webgl api 则用于绘制一键加速的2d 和 3d 图形。canvas 只支持两种图形的绘制，矩形和路径，其他复杂的图形是通过一条或多条路径组合而成。路径绘制 api。
svg mysql_SVG 与 canvas 优缺点和未来发展。
weixin_29378153的博客
01-30 222
SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVG DOM中的每一个元素都是可用的。您可以为某个元素附加Javascript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。CanvasCanvas通过Javascript来绘制2D图形。Canvas是逐像素进行渲染的在canvas中，一旦图形被绘制完成，它就不会...
SVG和Canvas对比
weixin_42139212的博客
02-15 651
位图和矢量图 1.位图 传统的 jpg / png / gif图都是位图 位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px 优点: 色彩丰富逼真 缺点: 放大后会失真, 体积大 2.矢量图 矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片 优点: 放大后不会失真, 体积小 缺点: 不易制...
html5学习-svg与canvas的区别
AngelQ
10-19 199
SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重
关于svg与canvas的比较
csdncsdn9876的博客
06-02 499
svg是可伸缩矢量图形。在放大或者缩小的过程中，图像的质量都不会有损失，而且能够处理时间响应。svg是一种xml描述2d图形的语言。比较适合大型应用。而canvas则比较倾向与像素，比较适合小游戏的开发，需使用javascript来绘制图形。。
svg canvas区别
木子小姐
07-18 720
svg：是一种用于描述图形的XML语法。 使用canvas来绘制图形是通过调用它提供的方法，API是基于Javascript的。 svg绘制图形是通过构建xml元素来实现。 区别：svg图形可以简单的通过移除相应的元素来编辑图片。而canvas要移除图片中的元素要把当前的元素擦除再重绘制一遍。 大部分画布绘制API都不是在<canvas>元素自身上定义，而是定义在一个“绘...
HTML5中Canvas与SVG的画图原理比较
09-28
对比SVG，Canvas是一种基于像素的绘图技术。Canvas通过JavaScript在页面上的一个像素网格内绘制2D图形，所有绘制的内容都是依赖分辨率的。一旦Canvas中的图形被绘制完成，它就被转换为像素信息，浏览器会忘记这些...
实现动态图形化效果：SVG与Canvas的对比
# 1. 介绍SVG和Canvas ## 1.1 什么是SVG？ Scalable Vector Graphics（可缩放矢量图形）简称SVG，是一种用于描述二维矢量图形的XML标记语言。...## 1.3 SVG和Canvas的特点及优劣势对比 - SVG是基于矢量的
图形与动画优化技巧：SVG与Canvas应用
SVG与Canvas简介 ## 1.1 SVG与Canvas概述 在前端开发中，SVG（Scalable Vector Graphics）和Canvas是两种常用的图形渲染技术。SVG是一种基于XML的矢量图形格式，它使用XML来描述图形内容，可以被缩放而不失真。...
svg&canvas
little_flowers的博客
11-08 292
前端4-2-10：Canvas与SVG之简介、对比总结
Yummy的博客
04-02 786
【先言】 【题外话】 本来呢，就打算做完这套题呢该吃饭了，前面不定项选择都对了嘿，开心的，谁知道？后面？一看来了个“正确答案: A C 你的答案: B D(错误)”，哦豁！？！不得不吐槽下自己，伤感了，giao，不能吃饭的，都记的啥，都记反了？完美避开正确答案了，good服了，难道是？真的饿坏脑袋了吗？赶紧的，拿小本本记下先，罗里吧嗦的，www...。 【问题】 以下说法中正确的是（） A、canvas 中绘制的元素不可以通过浏览器提供的接口获取到。 B、SVG 中绘制的元素不可以通...
Canvas和SVG的区别是什么？
PNJ的博客
04-09 751
主要是用笔刷来绘制2D图形的主要是用标签来绘制不规则矢量图的。
svg和canvas的区别
cxz
06-27 1833
1.可伸缩的矢量图形 2.是基于xml进行绘制图形 3.svg放大或者改变尺寸情况下图形质量不会有损。 4.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，1.h5新增属性 2.基于js进行绘制图形1、svg每个图形都可以看作是一个对象，如果对象属性发生变化，浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成，不会再得到浏览器的关注。如果图形位置改变，浏览器需要重新绘制。 2、canvas依赖分辨率，svg不依赖分辨率。 3、canvas不支持事件处理器，svg支持
Canvas 和 SVG 对比
Alan_1550587588的博客
05-07 3842
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。首先canvas是html5提供的新元素&lt;canvas&gt;，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。SVG：SVG...
HTML5实战——svg学习
weixin_34291004的博客
11-16 141
百度百科： 　　SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 什么是SVG？...
经典面试题（讨论canvas与svg的区别）
热门推荐
helloword_chen的博客
11-11 2万+
讨论关于canvas和svg的区别。首先canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。   首先，从它们的功能上来讲，canvas可以看做是一个画布。，其绘制出来的图形为
SVG vs Canvas
screaming的博客
09-27 695
SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？ 添加评论  分享 默认排序按时间排序 13 个回答 33赞同 反对，不会显示你的姓名 gy zhao 程序员 轻度强迫症  33 人赞同 Canvas是使用JavaScript程序绘图(动态生成
我涉及的数据可视化的实现技术和工具
weixin_30731305的博客
04-25 1354
最近一直在研究数据可视化的相关理论和实现方案，相关实现技术和工具也了解使用了不少，需要写篇综述性的文章做整理。由于本人之前主要是做web开发的，故而我所找到的数据可视化的实现技术和工具大部分都是基于web的。这很正常，因为web便于分享和查看，如无意外我们都希望用浏览器直接访问可视化作品。这篇文章主要记录我使用心得。 1. HTML5 canvas 乔教主去世的前后两年，HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值