前端4-2-10:Canvas与SVG之简介、对比总结

目录

【先言】

【题外话】

【问题】

1.定义

关于SVG(详见什么是SVG)

关于Canvas

2.两者区别

Canvas

SVG

对比列表

3.历史

4.功能

5.技术


【先言】

【题外话】

本来呢,就打算做完这套题呢该吃饭了,前面不定项选择都对了嘿,开心的,谁知道?后面?一看来了个“正确答案: A C   你的答案: B D (错误)”,哦豁!?!不得不吐槽下自己,伤感了,giao,不能吃饭的,都记的啥,都记反了?完美避开正确答案了,good服了,难道是?真的饿坏脑袋了吗?赶紧的,拿小本本记下先,罗里吧嗦的,www...

前端4-2-10:Canvas与SVG之简介、对比总结_第1张图片

【问题】

以下说法中正确的是()

A、canvas 中绘制的元素不可以通过浏览器提供的接口获取到。

B、SVG 中绘制的元素不可以通过浏览器提供的接口获取到。

C、html 中 A标签 target 属性的默认取值是 _self,默认在当前窗口打开。

D、为了优化网页的SEO效果,常用 javascript 动态生成网页的title、description、keyword。

正确答案: A C   你的答案: B D (错误)

 


【知识点:Canvas与SVG】

1.定义

  • 关于SVG(详见什么是SVG)

    • SVG 可缩放矢量图形(Scalable Vector Graphics),基于可扩展标记语言XML 出来的时间比较老

SVG 用来定义用于网格的基于矢量的图形

  • 关于Canvas

    • Canvas 是H5新出来的标签
    • Canvas画布,利用JavaScript在网页绘制图像
    • 在标签中给上宽高: 不用加单位
    • 如果在css中给宽高 会对图像造成拉伸 (默认宽高300px*150px)
    • 通过过去绘制工具 .getContext(“2d”) 来在画布中绘制图形

2.两者区别

下表列出了 canvas 与 SVG 之间的一些不同之处。

  • Canvas

  1.     依赖分辨率
  2.     不支持事件处理器
  3.     弱的文本渲染能力
  4.     能够以 .png 或 .jpg 格式保存结果图像
  5.     最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • SVG

  1.     不依赖分辨率
  2.     支持事件处理器
  3.     最适合带有大型渲染区域的应用程序(比如谷歌地图)
  4.     复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  5.     不适合游戏应用
  • 对比列表

前端4-2-10:Canvas与SVG之简介、对比总结_第2张图片


3.历史

  • canvas是html5提供的新元素。
  • svg存在的历史要比canvas久远,已经有十几年了。svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言。

4.功能

  • canvas可以看做是一个画布,其绘制出来的图形为标量图。可以在canvas中引入jpg或png这类格式的图片。在实际开发中,大型的网络游戏都是用canvas画布做出来的,并且canvas的技术现在已经相当的成熟。另外,我们喜欢用canvas来做一些统计用的图表,如柱状图曲线图或饼状图等。
  • svg,所绘制的图形为矢量图,不能引入普通的图片,因为矢量图的不会失真的特点,在项目中我们会用来做一些动态的小图标。这个特点也很适合被用来做地图,百度地图就是用svg技术做出来的。

5.技术

  • canvas里面绘制的图形不能被引擎抓取,canvas中我们绘制图形通常是通过javascript来实现。
  • svg里面的图形可以被引擎抓取,支持事件的绑定,svg更多的是通过标签来实现。我再来介绍一个svg的js库:TWO.JS。其中包含two.js和three.js前者用于绘制二维图形,后者用于绘制三维图形。TWO.JS可以支持三种格式,svg(默认)、canvas、和WEBGL。当然也可以在普通div中引入。

o了o了,学废了,两点了该系饭辽,下次再没记住得喝白开水了!!

前端4-2-10:Canvas与SVG之简介、对比总结_第3张图片

你可能感兴趣的:(前端,前端,HTML,canvas,画布,svg)