【校招VIP】前端HTML5之Canvas/SVG

考点介绍：

前端绘图的技术到目前为止有很多种：canvas、SVG、VML、Flash、Java Applet等。其中Canvas和SVG是校招中常考的两个，它们是html5中支持的2种可视化技术，都是可以在画布上绘制图形和放入图片。今天我们一起来看一下吧~

答案详情解析和文章内容可扫下方二维码或链接即可查看！

一、考点题目

1、说说你对SVG理解?

解答：SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式……

2、关于canvas和svg说法正确的是( )？

A.canvas支持事件处理器

B.canvas不依赖分辨率，缩放不失真

C.svg不依赖分辨率，缩放不失真

D.svg适合图像密集型的游戏

解答：正确答案是 C，解析详情见表格......

3、SVG 定义的图形是_____格式的？

A.HTML

B.XML

C.XHTML

D.DTD

解答：正确答案是 B，SVG 是基于 XML 的矢量图像格式……

4、谈谈你对canvas的理解？

解答：canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术……

5、关于html的canvas的绘制、缩放，下列说法正确的是？

A.图像绘制在canvas元素之外也可见

B.使用 drawImage方法绘制的图片可以用css3的tramsform:scale的属性实现缩放

C.默认情况下，canvas是一个可以获取焦点的元素

D.其他3个选项都不正确

解答：正确答案是 D，图像既可以绘制在canvas里，又开始绘制在canvas之外……

6、Canvas是什么？怎样写Canvas？

解答：Canvas是HTML5的一个元素，它使用Java在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。

如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。

7、SVG图形与canvas的区别错误的是（）

A.canvas是HTML5提供的新元素;

B.canvas绘制的是标量图，svg绘制的是矢量图；

C.canvas绘制的图形能被搜索引擎抓取；

D.canvas绘制图形通常是JavaScript实现，svg图形通常通过html标签来实现；

解答：C

svg可以给每一个图形添加事件，canvas不可以
svg的图形都是用xml标签画出来的，canvas是用js绘制
canvas绘制的是位图(标量图)也就是一个个像素绘制出来的，而svg是矢量图，也就是用几何特性会描述图像，并且可以无限制的自由组合`

8、关于canvas不正确的是( )？

A.canvas是HTML5的一部分，允许脚本动态渲染位图像

B.canvas是作为Flash的替代技术出现

C.canvas拥有多种绘制路径、矩形、圆形、字符及添加图像的方法

D.Internet Explorer自Internet Explorer9起已经可以支持canvas

解答：B

<video>代替Flash技术

9、SVG的（ ）属性用于定义元素轮廓的颜色？

A.fill

B.stroke

C.stroke-linecap

D.stroke-width

解答： B

stroke属性定义一条线,文本或元素轮廓颜色 

二、考点文章

1、微信小程序canva生成图片，长按图片识别小程序二维码详解

下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片，在小程序内部长按可以识别出来……

2、前端绘图方式Canvas和SVG的区别

Canvas和SVG是html5中支持2种可视化技术，都是可以在画布上绘制图形和放入图片。下面来介绍和分析一下他们……

3、Cavas 和 SVG 对比

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的……

三、考点视频

1、二叉树叶子结点数=度为2结点数+1

这是二叉树最常考的性质之一，是校招和考研笔试的考点……

更多资讯可搜索校招VIP小程序查看哦！

移动端链接：https://m.xiaozhao.vip/dTopic/detail/708

PC端链接：https://xiaozhao.vip/dTopic/detail/708