什么是三角函数？

三角函数是基本初等函数之一，是以角度（数学上最常用弧度制，下同）为自变量，角度对应任意角终边与单位圆交点坐标或其比值为因变量的函数。也可以等价地用与单位圆有关的各种线段的长度来定义。

在 HTML5 Canvas 的应用中，三角函数一般用于在画布中计算三角形未知长度的边和未知的角度。

常见的三角函数包括正弦函数、余弦函数和正切函数。Javasript API 提供了 Math 对象包含了这些计算方法。

// 返回一个数值的正弦值。
Math.sin(x)

// 返回一个数值的余弦值。
Math.cos(x)

// 返回一个数值的正切值。
Math.tan(x)

// 其中参数 x 是一个表示弧度的数值
// 还有一些常用的反三角函数

// 返回一个数值的反正弦值（以弧度为单位）。
Math.asin(x)

// 返回一个数值的反余弦值（以弧度为单位）。
Math.acos(x)

// 返回一个数值的反正切值（以弧度为单位）。
Math.atan(x)

// 返回从正 x 轴到点 (x,y) 与原点连线之间的偏移角度值，这是一个逆时针角度，以弧度为单位。
Math.atan2(y, x) 

动画的基本原理

动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。为了得到活动的画面，每个画面之间都会有细微的改变。而画面的制作方式，最常见的是手绘在纸张或赛璐珞片上。

而基于 HTML5 Canvas 的图形一旦绘制出来，它就是一直静止在那里。如果需要移动它，我们不得不对所有图形（包括之前的）进行重绘。也就是说，实现动画效果就是在画布上绘制图像后，清空画布，然后再绘制图像，再清空...即在动画未完成播放之前不断的重复这样的操作！

HTML5 Canvas 提供了 save 和 restore 方法用来绘制复杂图形。

它可以保存 canvas 的状态，包括 canvas 的平移、放缩、旋转、错切、裁剪等操作等等，也可以恢复到上次保存的状态。

相关方法：

// 保存当前环境的状态
context.save()

// 返回之前保存过的路径状态和属性
context.restore()

canvas 的状态存储在内存中，它的数据结构类似于栈，即符合“先入后出，后入先出”的基本特点。

HTML5 Canvas 支持我们可以直接通过 ImageData 对象操纵 canvas 中像素数据，直接读取或将数据数组写入该对象中。

ImageData 对象

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：

width ：图片宽度，单位是像素
height ：图片高度，单位是像素
data ：Uint8ClampedArray 类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。

data 属性返回一个 Uint8ClampedArray ，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组。

Uint8ClampedArray 包含高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1

在之前文章的所有例子中，我们有时会将一个图形画在另一个之上，在更多的情况下仅仅这样是远远不够的。

当新绘制的图形和已存在的图形交叠在一起时，对于合成的图形来说，绘制顺序和显示效果会有不同的要求。这里，我们可以利用 globalCompositeOperation 属性来改变这种状况。

相关属性：

// 设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
context.globalCompositeOperation="source-in";

// 更多值的说明
// source-over:默认，新图像会覆盖在原有图像
// source-atop:在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
// source-in:在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
// source-out:在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
// destination-over:在源图像上方显示目标图像。
// destination-atop:在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
// destination-in:在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
// destination-out:在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
// darken:显示源图像和目标图像，保留重叠部分最暗的像素
// lighten:显示源图像和目标图像，保留重叠部分最明亮的像素
// lighter:显示源图像和目标图像，重叠区域的颜色做加处理
// copy:显示源图像。忽略目标图像。
// xor:使用异或操作对源图像与目标图像进行组合。