zoukankan      html  css  js  c++  java
  • HTML5中canvas与SVG有什么区别

    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

  • 相关阅读:
    谷歌云服务器XShell登录
    PGI 遇到的坑
    Matlab处理数据导出Paraview可读的vtk文件(二)
    Matlab处理数据导出Paraview可读的vtk文件(一)
    Windows7 + OSG3.6 + VS2017 + Qt5.11
    CentOS安装指定版本GCC
    利用ncurses库开发终端工具箱(1)—— ToDoList小工具开发
    Winform Post请求传递Json格式参数的写法
    把Java代码转成c#可用的dll
    Image.FromStream(ms) 提示参数无效
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/11799900.html
Copyright © 2011-2022 走看看