HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

事件处理：

HTML5应用程序是以事件来驱动的，可以在canvas中增加一个事件监听器，当事件发生时，浏览器就会调用这个监听器

//方法一
canvas.onmousedown=function(e){
//一些代码
};

//方法二
canvas.addEventListener('mousedown',function(e){
//一些代码
})

基础的数学知识简介：

代数方程：（10x+5）x2=110

三角函数：180°等于π弧度

正弦、余弦、正切：

sin(α)对边/斜边

cos(α)邻边/斜边

tan(α)对边/邻边

向量运算：大小和方向

勾股定理，任何直角三角形的斜边，等于另外两边平方和的平方根

长度为一个单位（即模为1）的向量，叫做单位向量

向量的加减

向量的点积（用以判断物体碰撞后移动方向）

一帧就是一副静止的画面，连续的帧就形成动画

第二章 绘制

坐标系统：默认情况下，Canvas的坐标以canvas左上角为原点，X坐标向右增长，Y坐标向下延伸

矩形的绘制：Canvas的API提供了三个方法，分别用于矩形的清除、描边和填充

clearRect(double x,double y,double w,double h)（左上角x，y坐标，矩形的宽度和高度）

strokeRect(double x,double y,double w,double h)

fillRect(double x,double y,double w,double h)

颜色与透明度：

可以通过绘图环境的strokeStyle与fillStyle属性来设置

context.strokeStyle='red';

context.fillStyle='rgba(0,0,255,0.5)';

HSL格式的颜色相对于RBG来说更直观，RGB以硬件为导向（阴极射线管），HSL三个分量分别是色相、饱和度、亮度

渐变色与图案：

除了颜色值以外，strokeStyle与fillStyle也支持渐变色与图案

linear（线性渐变）与radial（放射渐变）

createLinearGradient()方法来创建线性渐变，需要向该方法传入两个点的x、y坐标（共4个），两点之间的连线就是canvas建立颜色渐变效果的依据，调用createLinearGradient()方法后返回一个CanvasGradient实例，将该实例作为fillStyle的值

context.fillStyle=gradient;

CanvasGradient有一个唯一的方法addColorStop()，向渐变色中增加5个“颜色停止点”，接收两个参数，一个是0~1.0之间的double值，代表颜色停止点在渐变线上的位置，另一个是DOMString类型的CSS3颜色字串值（颜色单词）

createRadialGradient()方法实现放射渐变，比createLinearGradient()多两个半径参数

图案：

Canvas元素也允许使用图案对图形和文本进行描边与填充，图案可以是image元素、canvas元素或video元素

createPattern()方法来创建图案，接收两个参数：图案本身、一个表示重复方式的字符串（repeat、repeat-x、repeat-y、no-repeat）

阴影：

不管是画的是图像还是文本，都可以通过修改绘图环境中的属性值来指定阴影效果

shadowColor：CSS3格式的颜色（设置为undefined会禁用阴影）

shadowOffsetX：从图形或文本到阴影的水平偏移（设为负值则是向左）

shadowOffsetY：从图形或文本到阴影的垂直偏移（设为负值则是向上）

shadowBlur：表示高斯模糊的数值（整数）

路径、描边与填充：

封闭路径（closed path）

开发路径（open path）