第一部分 Canvas基础

第1章 Canvas概述

1.1 Canvas是什么

1.1.1 Canvas简介

在HTML5之前，为了让页面获得绚丽多彩的效果，我们在很多情况下都是借助“图片”来实现的。然而图片体积大、加载速度慢，使用图片的代价就是降低了页面的性能。为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。

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

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

绘制图形

使用Canvas可以绘制各种基本图形，如矩形、曲线、圆等，也可以绘制各种复杂绚丽的图形，如图1-1所示。

绘制图表

很多公司的数据展示都离不开图表，使用Canvas可以绘制满足各种需求的图表，如图1-2所示。

动画效果

使用Canvas，我们也可以制作各种华丽的动画效果，非常棒！这也是Canvas给我们带来的一大乐趣，如图1-3所示。

游戏开发

HTML5在游戏开发领域具有举足轻重的地位，现在我们也可以使用Canvas来开发各种游戏。这几年非常“火”的游戏，如《捕鱼达人》《围住神经猫》等，都是使用HTML5 Canvas开发的，如图1-4所示。

此外，Canvas技术是一门纯JavaScript操作的技术，因此大家需要具备JavaScript入门知识。对于JavaScript的学习，可以关注“从0到1”系列的另一本图书：《从0到1:JavaScript快速上手》。

1.1.2 Canvas与SVG

HTML5有两个主要的2D图形技术：Canvas和SVG。事实上，Canvas和SVG是两门完全不同的技术，两者具有以下区别。

Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。

Canvas是基于“位图”的，适用于像素处理和动态渲染，放大图形会使图形失真，如图1-5所示；SVG是基于“矢量”的，不适用于像素处理和适合静态描述，放大图形也不会使图形失真，如图1-6所示。也就是说，使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”。

若发生修改，使用Canvas需要重绘，而使用SVG不需要重绘。

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

此外，并非Canvas比SVG有用，也并非SVG比Canvas有用，它们各自用于不同场合。在实际开发中，我们应该根据需求选择其中一种。

当然，这里只是简单介绍了Canvas与SVG的区别，如果想要真正了解，我们还得深入学习。最后给小伙伴一个小小的建议：很多人接触新技术的时候，喜欢在第1遍学习中就把每一个细节都抠清楚，事实上这是效率最低的学习方法。其实，如果有些东西我们实在没办法理解，那就直接跳过，等学到后面或者看第2遍的时候，自然而然就懂了。