第一章 基础知识

    canvas元素仅仅是为了充当绘图环境对象的容器而存在的，该环境对象提供了全部的绘制功能。尽管本书只关注2d绘图环境，不过Canvas规范也在着手准备支持其他类型的绘图环境。比如说，一个3d绘图环境的规范书就正在稳步制订之中。这一节将讲解2d绘图环境中的各种属性，同时也略带提一下3d绘图环境。

    1.2.1　2d绘图环境

    在JavaScript代码中，很少会用到canvas元素本身，除了像前一节中讲到的那样，偶尔会通过它来获取canvas的宽度、高度或某个数据地址。此外，可以通过canvas元素来获取指向canvas绘图环境对象的引用，这个绘图环境对象提供功能强大的API，可以用来绘制图形与文本，显示并修改图像等等。实际上，本书剩余部分基本上专注于对2d绘图环境的讲解。

    表1-3列出了2d绘图环境的全部属性。除了指向canvas元素自身的canvas属性之外，其余的2d绘图环境属性都与绘图操作有关。

表1-3　CanvasRenderingContext2D对象所含的属性

    该表展示了2d绘图环境对象的所有属性。在第2章中，我们将逐个地详述这些属性。

    提示：你可以扩充2d绘图环境对象的功能

    与每个canvas相关联的绘图环境对象都是一个功能强大的图形引擎，它支持很多功能，诸如渐变色、图像合成（image compositing）、动画等等。不过，它也有局限性，比如，绘图环境对象之中就不包含绘制虚线（dashed line）的方法。由于JavaScript是一门动态语言，所以，你可以向该绘图环境中加入新的方法，或是对已有方法的功能进行扩充。更多信息，请参阅本书2.8.6小节。

    3d绘图环境WebGL简介

    在Canvas中，有一个与2d绘图环境对应的3d绘图环境，叫做WebGL，它完全符合OpenGL ES 2.0的API。可以访问以下网址，查看这份由Khronos Group所维护的WebGL标准：http://www.khronos.org/registry/webgl/specs/latest/。

    在本书定稿时，浏览器厂商刚开始提供对WebGL的支持，仍然有类似iOS4及IE10这样主要的平台尚未支持WebGL。然而，Canvas的3d绘图环境是一项振奋人心的开发功能，它为各种各样前沿应用程序的制作提供了极大的便利。

    1.2.2　Canvas状态的保存与恢复

    在第1.2.1小节之中，我们讲了Canvas绘图环境的所有属性。在进行绘图操作时，需要频繁设置这些值。很多时候只是想临时性地改变这些属性，比如说，可能需要在背景中绘制细网格线，然后用粗一些的线条在网格之上进行后续的绘图。在这种情况下，需要于绘制网格线时临时性地修改lineWidth属性。