Html5的canvas标签和Svg以及VML之间的差异

最新推荐文章于 2023-11-26 22:24:54 发布
原创 最新推荐文章于 2023-11-26 22:24:54 发布 · 384 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了SVG(可伸缩矢量图形)与基于标记的绘图方法的区别。SVG使用XML描述图形，易于编辑且在缩放时保持高质量。相比之下，基于标记的绘图可能需要重绘来移除元素。SVG作为万维网联盟标准，为网格提供矢量图形，适用于需要高分辨率和编辑灵活性的场景。

标记和SVG以及VML之间的一个重要的不同是，有一个基于Javascript的绘图API，而SVG和VML使用一个XML文档来描述绘图。
这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG绘图很容易编辑，只要从其描述中移除元素就行。
要从同一图形的一个标记中移除元素，往往需要擦掉绘图重新绘制它。

什么是SVG?

  • 可伸缩矢量图行
  • 用于定义用于网格的基于矢量的图行
  • 使用XML格式定义图行
  • 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • 万维网联盟的标准
html绘图插件,canvas,svg,vml绘图插件
weixin_42173218的博客
06-19 727
看见标题中出现了一个vml，这个很多人不是很熟悉，在这里先简单讲解一下vml的相关知识点5，6vml全名 vector mark language 矢量标记语言微软自带的画笔工具vml出现的时间比较早，早在IE5，6，7的时候被用过，IE8不兼容如果想让IE8也兼容的话，需要加上vml的基本绘图流程：首先给html添加一个命名空间，有下面三种方式，但是用起来的话，还是第一种比较高大上一点xmln...
让IE兼容 HTML5的canvas标签
09-16
HTML5的canvas标签是Web开发中的一个重要组成部分，它允许开发者在网页上绘制图形，实现动态图像和交互式视觉效果。然而，由于历史原因，早期版本的Internet Explorer（IE6到IE9）并不支持HTML5的新特性，包括canvas...
SVG、CANVAS、VML比较
06-24
SVG、CANVAS、VML比较，有利于各位IT大神学习，在学习画图方面的提高。
VML、SVG、Canvas简介
jcx5083761的专栏
10-24 6529
1、VML：        VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途,VML只是被IE支持。 2、SVG：        可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W
html5 画布和SVG的差别
03-10 270
canvas和SVG可以在浏览器绘制图形，但是本质上是不同的。canves是绘制2d图象，SVG也是绘制2d图象。 Canvas是Javascript进行绘图的，是逐像素绘图。Canvas一旦图象绘制完成，就于浏览器无关了，图象的位置发生变化，整个场景都需要重新重新绘制，包括已经被覆盖的元素。 svg是使用xml绘制，可以为svg添加javascript的事件处理器。所有的DOM都是...
SVG和VML区别杂谈
weixin_33708432的博客
04-19 177
SVG和VML区别杂谈 很多组织一直在做这两种动态矢量语言的统一工作，SVG和VML的初衷不一样，SVG是为了集大成，VML却是为了方便Word向Web的迁移，所以相对于VML的傻瓜和方便，SVG简直就疯狂的强调其的可扩展性.... 一个简单的例子，一条直线，如果要加一个箭头，VML里面直接在stroke里面添加一个属性startarrow或者endarrow就搞定了！可以添加包括bl...
<canvas> 标记和 SVG 以及 VML 之间的差异
caoxj0507的专栏
02-26 1874
标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。 这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。 下面分别对SVG与 VML进行简单的介绍。 VML（Th
JS页面动态绘图工具SVG，Canvas，VML介简介
01-18
说到绘图、报表之类的技术，大家首先想到的就是Flex，当然也有许多...比如说maxGraph，你可以到http://www.jgraph.com/mxgraph.html上去看一下效果。 如果你已经在网络上看了一会了我们可以继续来聊一下Web中JS绘图的内
使用HTML5canvas进行Web绘图
02-26
HTML5canvas元素的出现填补了这种不足，开发人员可以使用JavaScript脚本语言在canvas中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用canvas元素进行基本绘图操作，以及完成简单的动画和用户交互任务，...
Web开发中的矢量绘图(vml,svg)处理和应用
weixin_33896069的博客
10-23 392
前言 1991 年物理学家Tim Berners-Lee首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展，HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点，但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果，不得已在页面中嵌入大量的 Flash。这...
VML+HTML实现流程图查看
11-23
实现了vml+html中显示的，并解决了ie浏览器兼容的问题，代码直接运行便好用
html5中的canvas和svg的使用
石羊博客专栏
05-05 1336
一、canvas
【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型
luemeon的博客
11-26 1147
不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。，它是浏览器提供的绘制动画的 api。
三种图表技术SVG、Canvas、WebGL 3D比较
a5199421的博客
08-09 994
1.什么是SVG？ 描述： 一种使用XML描述的2D图形的语言 SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 2.什么是canvas？ 描述： 通过Javascript来绘制2D图形。 ...
GML、SVG、VML的比较
moonpiazza的专栏
07-11 2460
GML、SVG、VML的比较GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言，都是XML词表，它们的语法并不难理解，但它们都有各自不同的用途和特点，下面简单介绍一下。GML(Geography Markup Language)是基于XML的空间信息编码标准，由OpenGIS Consortium (OGC)提出，得到了许多公司的大力支持，如Oracle、Galdos、MapI
HTML5 <canvas> 标记和 SVG 以及 VML 之间的差异
weixin_34301132的博客
07-22 163
　　标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。　　这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。　　要从同一图形的一个 标记中移...
关于JS页面动态绘图SVG，Canvas，VML介绍
java小强
03-23 444
说到绘图、报表之类的技术，大家首先想到的就是Flex，当然也有许多了解javaapplet，对于这两种技术来说，各有利弊。首先Flex很笨重，但是其效果实在让人喜欢。对于javaapplet来说，至少我在网络上很少看到，当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的。 其实现在Web上进行绘图的话还是有很多选择的，你可以到谷歌上搜索JS绘图，会有很多绘图工具提供给你使用，而...
前端开发面试笔试学习--html/css-01
M612a34的博客
01-11 427
1、margin和padding区别要理解css的关键是盒子模型（box model）。html里面有一些基本元素（element）如如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level) 元素和内联(inline)元素. 1、 Block-level element: 指能够独立存在，...
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
jishublog
09-16 298
本来想自己做个库的，毅力不够啊，所以放出源代码 当前实现的框架功能有： 1. 支持IE6+以上版本，支持Chrome， 支持FireFox 2. 动画加载机制 3. tooltip支持 4. legend支持 5. 功能丰富的参数设置 当前支持的图形种类有两种：饼图与折线图，将来也许会不定期更新，不断完善！ 希望还有点毅力和时间做话。不废话啦，直接上效果图： 折线图演示代码：...
WebTopology: SVG和VML绘制的高兼容性拓扑图
由于VML和SVG在技术细节上存在较大差异，通常不会在同一个项目中混合使用这两种技术。 对于拓扑图的具体实现，一般需要关注以下几个方面： 1. **节点和连接**：在网络拓扑图中，每个设备节点（如路由器、交换机、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值