①Canvas概述

（1）Canvas简介

    1.1.1 Canvas是什么？

    在HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“ ”低性能为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。

    Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。

    既然Canvas是HTML5核心技术，那它都有哪些厉害之处呢？

1、绘制图形

    canvas可以用来绘制各种基本图形如矩形、曲线、圆等，也可以绘制各种复杂绚丽的图形。

2、绘制图表

    很多公司业务的数据展示都离不开图表，使用Canvas可以用来绘制满足各种需求的图表。

3、动画效果

    使用Canvas，我们也可以制作出各种华丽的动画效果，这也是Canvas为大家带来的一大乐趣。

4、游戏开发

    游戏开发在HTML5领域具有举重轻重的地位，现在我们也可以使用Canvas来开发各种游戏。

 此外，Canvas技术时一门纯JavaScript操作的技术，因此大家需要具备JavaScript入门知识。

1.1.2 Canvas与SVG

1、Canvas是使用JavaScript动态生成的，SVG是使用XML静态小数的。

2、Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢量”的，不适于像素处理和静态描述，图形放大不会影响智力。也就是说，使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图。

3、每次发生修改，Canvas需要重绘，而SVG不需要重绘。

4、Canvas与SVG的关系，简单来说，就行“美术与几何”的关系一样。

此外，并非Canvas就比SVG更有前途，也并非SVG就比Canvas更有前途，因为这两个是用于不同场合的。在实际开发中，我们应该根据开发需求去选择。