当前位置：网站首页 > 文章教程 > 正文

HTML5(十)——Canvas 与 SVG 区别

xsobi 2024-12-01 05:38 48 浏览

作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg 是由 XML 定义的，在 html 5 中 canvas 与 svg 看着相似，其实不同。

一、基本介绍

Canvas

通过 js 来绘制 2D图形。
canvas 图像单位是像素。
canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。

SVG

svg 使用 XML 描述的2D图像。
svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。
svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。

二、SVG与Canvas比较

svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
svg 支持事件处理器，而 canvas 不支持事件处理器。
svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
canvas 适合开发游戏，svg 不适合游戏应用。

二、如何应用

2.1、功能上来说

canvas 是一个画布，绘制出来的图形是位图，因此 canvas 可以绘制图片，在实际应用中，由于渲染性能高，所以大型游戏开发都用的 canvas 。除此之外，还有统计中常见的柱状图、饼图、雷达图等也使用的 canvas 。而 svg 绘制的是矢量图，放大后不会失真，所以很适合做地图。

2.2、操作方面讲

canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。

html5canvas

上一篇：HTML5(六)——Canvas 高级操作
下一篇：HTML5图形绘制——canvas元素

相关推荐

当心，Android 即将关闭:作系统开发将不再公开，但没有理由恐慌: Android设备制造商可以显著改变作系统的外观和功能，但他们总是从开源Android开源项目（AOSP）中借用平台的所有核心功能。经过16年多的存在，Google决定对Androi...

安卓仍将开源，开发工作转内部（安卓开源有什么好处）: 近日关于谷歌将停止维护安卓开源项目的消息传出，引起广泛关注。据外媒AndroidAuthority报道，谷歌明确，安卓操作系统仍将开源，继续公布源代码，只是开发工作从下周开始将完全转到内部进行，相关...

独家:谷歌将全面私下开发Android操作系统，原因在此: 独家揭秘：谷歌为何要全面私下开发Android操作系统！独家：谷歌私下全面开发Android操作系统，背后原因大揭秘！独家消息：谷歌全面私下开发Android操作系统，原因究竟为何？...

Android开发与Java开发的共通之处:: 在开始前刚好我有一些资料，是我根据网友给的问题精心整理了一份「Android的资料从专业入门到高级教程」，点个关注在评论区回复“888”之后私信回复“888”，全部无偿共享给大家！！！android开...

Android 15新特性:二次识别、更个性化: ...

Google正改变其开发Android的方式将流程大幅转向内部开发分支: Google正在从根本上改变其开发未来Android版本的方式，将流程大幅转向内部开发分支。此前，Android的大部分开发工作都是通过定期更新公共Android开源项目(AOSP)存储...

谷歌调整 Android 开发策略:全面内部开发，兼顾开源与效率: 【TechWeb】据外媒消息，谷歌公司即将对开发策略进行进一步调整。未来，谷歌计划将所有AndroidOS组件的开发工作都放在内部进行，旨在提高整体的研发效率。目前，尽管Android的部分...

APP的开发方式及特点（简述app开发流程）: APP的开发方式主要有以下几种，每种方式都有其独特的特点和适用场景。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎交流合作。1.原生开发（NativeDevelopment）...

.Net程序员环境安装:IIS的详细安装步骤，打造Web服务: 做全栈攻城狮-每日更新原创IT编程技术及日常实用视频。主要内容：众所周知，程序员的开发需要环境的支持，今天就介绍一下IIS的配置。当然接下来两篇中也介绍一下数据库以及VisualStudio201...

七种有前景的Web技术（web的就业前景）: 网站开发领域飞速发展。仿佛每一天都有新的框架或者设计工具问世。本文会概括介绍网页设计和开发领域的七种新兴技术。借助这些技术就可以轻松方便地搭建一个美观、实用的网站和web程序。让我们开始吧！Meteo...

WebService入门（webservice入门详解）: 一、什么是WebServiceWebService是部署在Web上的，可访问的应用程序。主要是对外提供业务接口(业务功能)。...

什么是 SOAP Web 服务（soap模式具体指的是什么）: SOAP是什么意思？SOAP是一种协议，它代表...

「网络通信——WebRTC」WebRTC 服务质量 (QoS)——SVC: 【1】概念简介...

从 0 到 1:构建属于你的 Linux 高可用 Web 服务: ...

涨薪技术|0到1学会性能测试第88课-Web_service_call函数: 前面我们学习了监控调优必须要掌握的协议知识，今天开始我们学习接口性能测试的技术...

一周热门

最近发表

首页
收录
顶部