标签：style blog http color 使用 os io strong
事件处理：
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）
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2,布布扣,bubuko.com
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2
标签：style blog http color 使用 os io strong
原文地址：http://www.cnblogs.com/sdgjytu/p/3889197.html
