SVG

SVG 是一种使用 XML 描述 2D 图形的语言，它基于XML也就是我们可以为某个元素附加JavaScript事件处理器，如果SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。它是逐像素进行渲染的，一旦图形被绘制完成，如果它的位置发生了变化，那么整个场景都需要重新绘制，包括任何或者已经被覆盖的对象

SVG与canvas的区别

（1）SVG是用来描述XML中2D图形的语言，canvas借助JavaScript动态描绘2D图形

（2）SVG可支持事件处理程序而canvas不支持

（3）SVG中属性改变时，浏览器可以重新呈现它，适用于矢量图，而canvas不可以，更适合视频游戏等。

（4）canvas可以很好的绘制像素，用于保存结果为png或者gif,可做为API容器。

（5）canvas取决于分辨率。SVG与分辨率无关。

（6）SVG具有更好的文本渲染，而Canvas不能很好的渲染，渲染中的SVG可能比Canvas慢，特别是应用了大量的DOM。

（7）画布更适合渲染较小的区域。SVG渲染更好的更大区域。

SVG与canvas之间的比较

SVG canvas
可扩展 不可扩展
支持DOM和事件 没有事件支持
不依赖分辨率 分辨率依赖
在渲染复杂区域时可能会更慢 不适合较大或复杂的区域
呈现更好更大的区域（DOM除外） 渲染更小的区域
更好的矢量图形 更适合动画（视频）和图像
不适合API 适合API
很好地呈现文本 不能很好地呈现文本    

转载自：https://www.php.cn/div-tutorial-413397.html

HTML5中canvas与SVG有什么区别的更多相关文章

  1. HTML5中的article和section的区别

    HTML5中的article和section的区别 一.总结 一句话总结: article和section都相当于语义化后的div,article强调独立性,section强调分段或者分块 1.art ...

  2. H5_0009：关于HTML5中Canvas的宽、高设置问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas widt ...

  3. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  4. HTML5中Canvas概述

    一.HTML5 Canvas历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若 ...

  5. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  6. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  7. canvas与svg整理与区别

    1.canvas画布(位图) 2.绘制矢量图 1.不要在style中给canvas设置宽高 会有位移差 2. //获取元素 var c=document.getElementById("c& ...

  8. html5中画布和SVG的比较

    SVG是基于XML的图形语言,在DOM解析中其每个元素都是可以用的,这样就可以为SCG元素附加JavaScript事件处理器,实现更加丰富的效果. 在SVG中,每个被绘制的图形均被视为对象,如果SVG ...

  9. HTML5中canvas介绍

    1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...

随机推荐

  1. HDU-6038 Function 思维+循环节

    解法:这道题很有意思,值得一做和细细思考. 首先是我们要观察这个映射公式,他的实质是什么?其实就是b到a的循环映射,这是因为a数列和b数列都是0-n-1的排列,意味着每个数都是唯一的,那么ab的这个循 ...

  2. centos 搭建svn服务器

    1 安装svnserve yum install subversion -y 2 创建仓库 mkdir /svn/rep1 -p mkdir /svn/rep2 -p svnadmin create ...

  3. MySQL WAL

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11447794.html WAL: Write-Ahead Logging 先写日志,再写磁盘.具体说, ...

  4. C指针，&，*，指针的指针

    C指针: 指向变量的地址,想象成房间号 &: 取地址符号 *:间接访问符号, 访问p所存地址的内容 #include <iostream> int main(int argc, c ...

  5. Python_005(字典无极坑)

    一.字典(dict) 1.字典的定义格式:dic{key1:value1,key2,value2} :这里面key是唯一的,保存的时候,根据key计算一个内存地址,然后将key-value保存在这个地 ...

  6. QQ空间分享网址

    现在大部分网站都在每个界面设计了分享这个功能,但还是有的网页没有(比如 B 站只能分享具体的视频).在原来的 QQ 空间分享的地方已经找不到法自己创建分享.上网一搜有分享的接口,可这个接口是给开发者用 ...

  7. UGUI OnValueChanged 动态参数指定

    在选择方法的时候注意,选择最上面的动态参数的方法.

  8. java反射机制-简单实例

    public class Car { private String brand; private String color; private int maxSpeed; public Car() { ...

  9. JS创建表格完整

    <!DOCTYPE> <html> <head> <meta charset=utf-8 /> <title>动态表格</title& ...

  10. 【ABAP系列】SAP smartforms金额字段产生空格，除去空格的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP smartforms金额 ...