HTML5 Canvas vs SVG/VML？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

canvas 和 SVG 以及 VML 之间的差异

canvas 和 SVG 以及 VML 之间的差异： canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，canvas> 有一个基于 JavaScript 的绘图 API，而 SVG...和 VML 使用一个 XML 文档来描述绘图。...例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。要从同一图形的一个 canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。.../details/73350998 学习VML：https://blog.csdn.net/yinxianluo/article/details/45334837 学习svg：http://www.runoob.com.../svg/svg-tutorial.html

3.2K1 0

HTML 5 Canvas vs. SVG

可扩展性Canvas可扩展性：由于是基于像素绘制，图形放大或缩小时会出现失真，无法像 SVG 那样保持清晰。适用场景：适合图像处理、游戏、动态效果等，尤其是对质量要求不高或不需要无损缩放的场景。...canvas.addEventListener("click", function(event) { // 处理点击事件});php66 Bytes© 菜鸟-创作你的创作SVG交互性：由于每个 SVG...SVG样式和动画：可以直接使用 CSS 控制 SVG 元素的样式和动画，也可以通过 JavaScript 操作。...SVG文件大小：SVG 文件通常比 Canvas 更小，尤其是用于图标或简单图形时，因为它是基于矢量的，图形细节通过标记描述。9. 适用场景总结Canvas 适用场景游戏开发：需要频繁更新图形的场景。...选择使用 Canvas 还是 SVG 取决于你的应用需求：是否需要频繁更新图形，图形的复杂性，是否需要支持交互和可访问性等。https://www.52runoob.com/archives/5093

4331 0

您找到你想要的搜索结果了吗？

是的

没有找到

HTML5（十）——Canvas 与 SVG 区别

作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg...svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。...所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。...svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。 canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。...canvas 适合开发游戏，svg 不适合游戏应用。

4.1K3 0

HTML5（十）——Canvas 与 SVG 区别

作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg...svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。...所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。...svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。 canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。...canvas 适合开发游戏，svg 不适合游戏应用。

2.1K5 0

HTML5（十）——Canvas 与 SVG 区别

作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg...svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。...所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。...svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。 canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。...canvas 适合开发游戏，svg 不适合游戏应用。

2.1K2 0

网络图形标准

前端绘图有几种方式，主流的网络图形标准有： VML，IE 支持； SVG，FF、Safari 和 Opera 支持； Canvas，HTML5 规范支持。...HTML5 大势所趋，IE9 也支持了 Canvas。Canvas 和 SVG 有相当程度互补之处，相比而言 VML 应该是将被淘汰的标准。...Canvas 存在一个基于 JavaScript 的绘图 API，这是和 SVG、VML 的不同之处，但是基于 JavaScript 就意味着通常对于 DOM 的操作不像 SVG、VML 那么容易，每次对图像的修改可以移除一个...另外一个，Canvas 具备 3D 图形的特性（其实 VML 和 SVG 在开源包支持下也可以具备这样的特性），虽然现在支持 3D 特性的浏览器还很少，支持能力还很薄弱，但是未来相信能看到 App 和网页的大统一...值得一提的是，当前 SVG 和 VML 在浏览器支持度的不同，使得诸多前端矢量图形库针对 IE 和非 IE 做了两套实现，保证在 IE 下用 VML 渲染，而其他浏览器中则用 VML 渲染，而对于 Canvas

1.3K0 0

绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让...Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。...《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/...以下一段小例子，展示了加载一个SVG图片后，分为七个基本进行缩放绘制的效果，可看出Canvas绘制SVG可保持其矢量不失真的特性 function draw(){ var img = new Image...绘制到Canvas还有一种特殊的应用场景，就是将HTML元素通过SVG的foreignObject特性描述在SVG中，然后Canvas绘制SVG时，即可把foreignObject描述的HTML内容绘制到

6.5K8 0

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。...canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。...通俗说WebGL中canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，这些库多数用于HTML5游戏开发。 ? Three.js的示例代码： HTML5游戏开发随着HTML5的发展与硬件性能的提升HTML5游戏开发越来越受到游戏开发者的重视，因为WebGL存在一定的复杂度，所有产生了许多优秀的开源HTML5游戏引擎，下面是github...，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）直接嵌入 svg xmlns="http://www.w3.org

11.8K10 0

绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让...Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。...《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/...以下一段小例子，展示了加载一个SVG图片后，分为七个基本进行缩放绘制的效果，可看出Canvas绘制SVG可保持其矢量不失真的特性 function draw(){ var img = new Image...绘制到Canvas还有一种特殊的应用场景，就是将HTML元素通过SVG的foreignObject特性描述在SVG中，然后Canvas绘制SVG时，即可把foreignObject描述的HTML内容绘制到

2.4K3 0

三天学会HTML5——SVG和Canvas的使用

第2天将学习如何使用Canvas 和使用SVG 实现功能 Lab1—— 使用Canvas Canvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS...Lab 2 使用SVG 工作如Canvas,SVG 支持在矩形中画图像，接下来将了解到Canvas 与SVG 的区别。初始化 1....SVG VS Canvas SVG 和Canvas 区别： Vector VS Pixel Canvas 是基于Pixel 而SVG 是基于Vector ? ?...简单来说SVG图片是与屏幕分辨率无关的，而Canvas 不是。 XML VS JavaScript SVG使用语义标记可绘出图形，然而Canvas就只能使用JS脚本代码。...支持事件处理 Canvas 不支持事件处理，SVG 支持。

3.3K9 0

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame 2、css3 3、svg 4、canvas（当然，这个还是要配合js）也许这么分类是不对的...，因为无论如何都需要脚本控制，那么也许应该分为 1、js+传统css 2、css3 3、js+svg 4、js+canvas 但由于requestAnimationFrame比较特殊，所以还是单独出来说吧...4、canvas 依赖js（参考1），修改canvas的效果，简单的效果可以直接利用canvas.getContext("2d")画出来；复杂的效果，可以配合Image实现。...可以发现，CSS3和canvas是清一色都被支持到了，而SVG在Android低版本（2.X）浏览器是不支持的。...6、总结如果做游戏，肯定是清一色canvas+开源的框架，但是普通的简单网页效果，例如图表，就应该根据实际的情况灵活运用各种方式了。而SVG相对而言，可能是较方便实现图表的方式。

4.8K1 0

浅谈两种前端截图方式：Canvas截图 vs SVG截图

Canvas截图：html2canvas SVG截图：rasterizehtml 原理首先来谈下两种前端截图方式的原理，虽然实现方式不太一致，但是核心思想是相同的。...以rasterizehtml为代表的SVG截图，通过遍历DOM克隆一份副本，利用SVG的foreignObject把DOM作为外部资源嵌套在SVG中，将此SVG在Canvas上重新绘制，并根据DOM的样式应用在对应的绘制元素上...转换过程可理解成：DOM→SVG的ForeignObject→Canvas→Image。两种前端截图方式最后都是通过把DOM绘制到Canvas，再通过Canvas输出图片。...Canvas截图的限制性无法渲染跨域资源(支持同域) 无法渲染iFrame和Flash内容(支持SVG) SVG截图的限制性无法渲染跨域资源(支持同域) 无法渲染如lazyload等通过JS加载的资源...const base64 = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(res.svg))); Render

15.4K5 0

【学习】15个最棒的JavaScript图形图表库

它通过HTML5/SVG渲染来支持跨浏览器兼容性，并且可以跨平台移植到iPads、iPhones、 Android。它还包含支持旧版本IE的VML。...它通过HTML5的canvas属性渲染。支持旧版本的浏览器如IE7/8。ChartJS 默认是响应式的，它良好的适应手机端和平板端。回到顶部 Chartist.js ?...通过SVG渲染。回到顶部 Smoothie Charts ? 如果你处理实时的数据流的话，Smoothie Charts 可能是非常有帮助的。它通过HTML5的canvas属性渲染。...标准的浏览器使用SVG渲染，而旧版本的IE浏览器则使用VML。个人免费使用，而商业用户则需要购买许可证。回到顶部 Fusioncharts ? Fusioncharts 是最老的图表库之一。...使用HTML5/SVG和VML来确保兼容性和可移植性。跟其他大部分图表库不同，它同时支持JSON和XML格式的数据，并且可以导出下面三种格式的数据：PNG、JPG、PDF。兼容IE6。

5.7K4 0

HTML5 内联 SVG

HTML5 支持内联使用 SVG 图像，使得 SVG 可以直接嵌入到 HTML 页面中，而不需要引用外部文件。这为网页设计和开发带来了更大的灵活性，允许开发者直接操作图形，并且在响应式布局中表现优秀。...内联 SVG 是指将 SVG 代码直接嵌入到 HTML 文档中，而不是通过标签加载外部的 SVG 文件。1. ...stroke="black" stroke-width="3" fill="red" />svg>php151 Bytes© 菜鸟-创作你的创作svg>：定义一个 SVG 图形容器。...常见 SVG 图形元素1. ...总结HTML5 的内联 SVG 提供了一种强大的方式来在网页中展示图形和动画。

8431 0

canvas学习和滤镜实现

最近学习了 HTML5 中的重头戏–canvas。利用 canvas，前端人员可以很轻松地、进行图像处理。...canvas 和 svg、vml 的区别？...canvas标签和 SVG 以及 VML 之间的一个重要的不同是，canvas标签有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。...canvas 绘图学习大多数 Canvas 绘图 API 都没有定义在 canvas标签本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。...canvas 绘制矩形 // 处理canvas元素 var c = document.querySelector("#my-canvas"); c.width = 150; c.height = 70;

1.1K3 0

HTML5 Canvas

canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。什么是 canvas?...HTML5 canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. canvas> 标签只是图形容器，您必须使用脚本来绘制图形。...创建一个画布（Canvas）一个画布在网页中是一个矩形框，通过 canvas> 元素来绘制. 注意: 默认情况下 canvas> 元素没有边框和内容。...document.getElementById("myCanvas"); 然后，创建 context 对象： var ctx=c.getContext("2d"); getContext("2d") 对象是内建的 HTML5...Canvas 坐标 canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75)。

6231 0

手把手教你利用JS给图片打马赛克

效果演示 Canvas 简介 HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）不过，元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务 get...HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）不过，元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务 getContext() 方法可返回一个对象...，该对象提供了用于在画布上绘图的方法和属性本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等标记和 SVG 以及 VML 之间的差异：...标记和 SVG 以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。...例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。要从同一图形的一个标记中移除元素，往往需要擦掉绘图重新绘制它。 ?

2.2K2 0

HTML5之Canvas

原文作者：Iris_mao（简书作者）原文链接：http://www.jianshu.com/p/a6436969859d Canvas API 在网页上使用cnavas元素时，会创建一块矩形区域，...默认大小是300*150px 坐标从左上角开始的，x轴沿着水平方向向右延伸，y轴垂直方向向下延伸检测浏览器对canvas的支持情况: Canvas API Canvas is supported in you browser...> function drawDiagonal() { //取得canvas元素及其绘图上下文 var canvas =document.getElementById

1.7K2 0

html5 - canvas 简介

什么是Canvas？ 1、canvas 元素是html5的核心功能之一，使用 JavaScript 在网页上绘制图像。 2、画布是一个矩形区域，您可以控制其每一像素。...3、每次更改某个canvas元素，此canvas元素都需要整体重绘。 4、无法只修改某个canvas元素的某一部份。 5、canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...6、canvas 元素本身没有绘图能力。 Canvas 能做什么？ 1、交互游戏 2、图表 3、广告 4、图形编辑器 5、模拟器 6、其它类型的浏览器插件

1.3K8 0

html5 canvas画布

DOCTYPE html> canvas... id="myCanvas" width="80px" height="80px" style="border: 1px solid #000000">canvas> canvas id=..."myCanvas2">canvas> canvas id="myCanvas3">canvas> canvas id="myCanvas4">canvas> canvas id="myCanvas5">canvas> canvas id="myCanvas6">canvas> <!

1.5K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭