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

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 421平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

原创最新推荐文章于 2026-04-26 18:05:13 发布 421 阅读 AI 写同款· GEO 优化 ›

HTML ＜canvas＞标签 canvas> 标签定义图形，比如图表和其他图像。标签只是图形容器，您必须使用脚本来绘制图形。阅读详情

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

什么是SVG?

可伸缩矢量图行
用于定义用于网格的基于矢量的图行
使用XML格式定义图行
图像在放大或改变尺寸的情况下其图形质量不会有损失
万维网联盟的标准

收录于

前端

当前文章被收录于：

前端

75 篇文章 1 人学习

前端

订阅专栏查看详情

当前文章被以下社区和专栏收录：

SVG、CANVAS、VML比较 SVG、CANVAS、VML比较，有利于各位IT大神学习，在学习画图方面的提高。立即下载

相关推荐

VML+HTML实现流程图查看

实现了vml+html中显示的，并解决了ie浏览器兼容的问题，代码直接运行便好用

Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家Tim Berners-Lee首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展，HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点，但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果，不得已在页面中嵌入大量的 Flash。这...

weixin_33896069的博客 424

SAP生产版本导入避坑大全：从‘黄灯’到‘绿灯’，详解CM_FV_MKAL_CONSISTENCY_CHECK检查函数

本文深入解析SAP生产版本导入过程中的常见问题，特别是通过`CM_FV_MKAL_CONSISTENCY_CHECK`检查函数从‘黄灯’异常到‘绿灯’正常的修复方法。涵盖静态与动态校验机制、典型异常场景诊断及批量导入最佳实践，帮助SAP运维人员高效解决生产版本管理难题。

weixin_30568591的博客 387

VML、SVG、Canvas简介

1、VML： VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途,VML只是被IE支持。 2、SVG：可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W

jcx5083761的专栏 6608

【Python】torch_npu

Ascend AI处理器核心计算范式与PyTorch的桥接艺术：深入探索torch_npu的基石要真正理解，我们必须首先超越其作为PyTorch后端库的表面认知，深入其所服务的硬件——华为昇腾（Ascend）AI处理器的核心计算范式。这不仅仅是关于如何在NPU上运行PyTorch模型，更是关于NPU如何设计其计算，以及如何巧妙地将这种硬件特性映射到PyTorch的抽象层之上。1. 昇腾AI处理器的达芬奇架构：极致算力的源泉昇腾AI处理器并非传统的CPU或GPU。它采用了华为独创的达芬奇（Da Vinci）架

宅男很神经 5370

【阿里云大模型高级工程师ACP学习笔记】2.8 部署模型

【摘要】本文主要分享自学阿里云大模型高级工程师 ACP 认证中《2.8 部署模型》的学习笔记。详细介绍学习目标、梳理涵盖的知识点并评估其重要性和难易度，对既重要又困难的知识点进行重点分析，旨在为对阿里云大模型学习和认证感兴趣的读者提供学习思路和经验参考。

davidkorhenn的博客 2060

html5中的canvas和svg的使用

一、canvas

石羊博客专栏 1368

编码约定的自由度：重新思考Hamming码在实际工程中的灵活应用

本文探讨Hamming码在实际工程中的灵活应用，突破标准实现的思维定式。通过分析不同编码约定的优缺点和资源受限环境下的设计权衡，展示如何根据嵌入式系统、通信协议等具体需求定制汉明码实现，优化编解码效率并降低硬件开销。

perl8的博客 178

三种图表技术SVG、Canvas、WebGL 3D比较

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

a5199421的博客 1048

【STM32单片机】RS485通信—基于STM32G474芯片

做项目需要用485通信来控制Go电机参考资料：【【STM32F103C8T6系列】10. 实验例程——485(USART串口)通讯实验】 https://www.bilibili.com/video/BV19w411r7ka/?PDF: STM32G474 开发指南正点原子 DMG474 开发板教程第28章485只是物理层，代码逻辑还是UART串口通信，相当于是电路有RS485转换芯片，所以还是用UART串口通信方式。

m0_48808835的博客 3647

PyTorch强化学习实战（3）——Gymnasium API扩展功能

我们已经学习了编写智能体必需的 Gymnasium 核心功能，其余 API 功能部分虽然非必需，但能显著提升开发效率和代码整洁度。在本节中，我们简要地介绍了 Gymnasium API 的扩展功能，学习了如何以模块化的方式扩展现有环境的功能，并熟悉了使用包装器可视化智能体活动的方法。

盼小辉丶的博客 1199

【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型

不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。，它是浏览器提供的绘制动画的 api。

luemeon的博客 1244

44位abogus补环境与纯算逆向分析

44位ab参数补环境与纯算加密流程逆向分析

吴秋霖的博客 2771

HTML5 canvas标签

HTML 5 <canvas> 标签定义和用法 <canvas> 标签定义图形，比如图表和其他图像。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。实例如何通过 canvas 元素来显示一个红色的矩形： <canvas id="myCanvas"></canvas> <s...

312

Simulink开发项1000例实战专栏--实例38：基于Simulink的周波变换器（Cycloconverter）

需求分析周波变换器（Cycloconverter），也称为频率变换器或直接变频器，是一种将输入的固定频率交流电直接转换为不同频率的交流电的电力电子设备。它广泛应用于工业领域，如大功率电机驱动、风力发电、船舶推进系统等场合。与传统的间接变频器（如交-直-交变频器）相比，周波变换器具有更高的效率和更简单的结构，适用于需要低频输出的应用场景。

xiaoheshang_123的博客 334

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

HTML5 - Canvas标签<介绍>

HTML 5 <canvas> 标签定义和用法 <canvas> 标签定义图形，比如图表和其他图像。HTML 4.01 与 HTML 5 之间的差异 <canvas> 标签是 HTML 5 中的新标签。<canvas> 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块

wuya_meiya的博客 376

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

HTML5开发之Canvas绘图之实战入门

文章转自：http://www.xcoder.cn/html/web/Client/2012/1007/5.html 作为HTML5 中新引入的重要标签之一，Canvas元素使得 Web 开发人员可以直接使用 JavaScript 脚本在 Web 页面进行绘图。这样，作为第三方插件的F...

177

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版【x86|x64】

HTML5标签整理六

HTML5 标签定义和用法标签定义图形，比如图表和其他图像。标签只是图形容器，您必须使用脚本来绘制图形。实例如何通过 canvas 元素来显示一个红色的矩形： var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle

buildSetting的博客 672

[HTML5-Canvas] HTML5 <canvas> 标签

定义和用法标签定义图形，比如图表和其他图像。实例如何通过 canvas 元素来显示一个红色的矩形： var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);

我的Github 1176

html5 图形标签,HTML5 canvas 标签介绍:定义图形

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。html 5 的第一份正式草案已于2008年1月22日公布[3]。html5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 html5 支持。2013年5月6日， html 5.1[5]正式草案公布。该规范定义了第五次重大版本，第一...

weixin_39630515的博客 293

html5 <canvas> 标签

定义和用法只是图形容器，可定义图形，比如图表和其他图像，须使用脚本来绘制图形。标记和 SVG 以及 VML 之间的差异标记和 SVG 以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是

Lucky Star的博客 889

HTML 5 <canvas> 标签用法

定义和用法标签定义图形，比如图表和其他图像。标签只是图形容器，您必须使用脚本来绘制图形。实例如何通过 canvas 元素来显示一个红色的矩形： var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyl

QC班长的博客 835

HTML5 canvas 标签介绍:定义图形

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33890526的博客 184

利用canvas绘制图形

绘制图有很多种方法，可以借助flash实现，也可以使用SVG和VML来绘图。本章将要学习一种新的绘图方法——使用Canvas元素，它是基于HTML5原生的绘图功能。使用Canvas元素，可以绘制图形，也可以实现动画。它方便了使用Javascript脚本的前端开发人员，寥寥的竖行代码，就可以在Canvas元素中实现各种图形及动画。本章将介绍如何使用Canvas元素来绘制一些简单的图形。本章主...

weixin_34163741的博客 358

<canvas> 标签

标签定义图形，比如图表和其他图像。实例如何通过 canvas 元素来显示一个红色的矩形： var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);

齐枫的博客 716

上一篇：从setTimeout到js的异步原理

下一篇： HTML5 Web 存储

VML+HTML实现流程图查看

11-23

实现了vml+html中显示的，并解决了ie浏览器兼容的问题，代码直接运行便好用

Web开发中的矢量绘图(vml,svg)处理和应用

weixin_33896069的博客

10-23

424