弧度与sin及cos的关系
目的：
通过理解弧度与sin及cos的关系，可以根据弧度及半径求出旋转指定弧度后所到达的dx,dy坐标
弧度(angle)与角度(degree)的关系：
360角度 = 2π
1角度 = π/180弧度
1弧度 = 180/π角度
即：30角度的弧度值 = 30 * (π/180) ，30弧度的角度值 = 30 * (180/π)
通过弧度与半径求旋转指定弧度后目标点的坐标：
sin(angle) = y/r：y为角的对边长度，即旋转后坐标点的y坐标；r为半径，为斜边长
cos(angle) = x/r：x为角的邻边长度，即旋转后坐标点的x坐标；r为半径，为斜边长
关系图解
故围绕中心点(0,0)旋转求值：dx = cos(angle) * r，dy = sin(angle) * r
注：若中心点为(10,20)，则dx = 10 + cos(angle) * r，dy = 20 + sin(angle) * r
五角星代码示例1
上述代码效果图
五角星代码示例2
上述代码示例效果图
Canvas图形综合操作globalCompositeOperation
使用方法：
ctx.globalCompositeOperation = type
12种type值的介绍：
source-over：新图形覆盖原图形，其他部分正常显示
destination-over：原图形覆盖新图形，其他部分正常显示
source-in：只显示在原图形里面的新图形，其他部分透明
destination-in：只显示在新图形里面的原图形，其他部分透明
source-out：只显示在原图形之外的新图形，其他部分透明
destination-out：只显示在新图形之外的原图形，其他部分透明
source-atop：新图形只绘制在原图形之上，原图形其他部分正常显示
destination-atop：原图形只绘制在新图形之上，原图形其他部分正常显示
lighter：重叠部分变亮，其他部分正常显示
darker：重叠部分变暗，其他部分正常显示
xor：重叠部分透明，其他部分正常显示
copy：只保留新图形，其他部分透明
以上类型的比较可参考Mozilla开发者文档的globalCompositeOperation属性
type为xor的效果图
Canvas绘制阴影效果
功能：
为ctx设置阴影效果后，在当前ctx状态下，canvas中绘制的图像都将出现阴影。
使用方法：
shadowOffsetX：距离图形当前坐标轴x轴的偏移量，默认值为0
shadowOffsetY：距离图形当前坐标轴y轴的偏移量，默认值为0
shadowColor：阴影的颜色，默认值为fully-transparent black，即透明
shadowBlur：阴影的模糊程度，默认值为0
代码示例：
上述代码效果图
Canvas的图像绘制：drawImage
功能：
通过canvas的drawImage方法 ，将指定图片绘制到canvas画布上。
绘制流程：
创建一个图片对象，用来承载图像var img = new Image();
设置图像源img.src = "xxx.jpg;"
监听图像对象的onload事件，图像加载完成后会执行该事件指定的函数img.onload = draw
在onload制定的draw函数中通过drawImage方法将img对象中的图像绘制到canvas画布中
drawImage的3种方法：
drawImage(img,destX,destY)：以画布的destX、destY作为图像显示起始点，将整个img图像按图像原始像素绘制到画布中，超出画布不绘制；
drawImage(img,destX,destY,destWidth,destHeight)：将整个img图像绘制到画布中，以画布的destX、destY作为显示图像的起始点，destWidth、destHeight作为图像的显示大小；若destWidth、destHeight大于图像原始像素，则图像会放大(会模糊)；反之则缩小。
drawImage(img,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)：从img的sourceX、sourceY起始点，获取sourceWidth、sourceHeight大小的图像，并将获取到的图像draw到画布中，从画布的destX、destY起始点开始绘制，将获取到的图像绘制成destWidth、destHeight大小(destWidth、destHeight若大于sourceWidth、sourceHeight，图像会放大即模糊；反之则缩小)
示例代码：
上述代码示例效果图
CreateJs之EaselJs基础应用
EaselJs是什么？
EaselJs：一个javascript库，方便更快速的处理canvas。
EaselJs如何使用？
引入easeljs的js文件
在body元素中创建一个canvas元素
基于canvas元素创建一个createjs的舞台var stage = new createjs.Stage("demoCanvas");
创建需要被添加到舞台的对象，如创建一个图形对象var circle = new createjs.Shape();
对图形对象进行处理，如画一个圆circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
将图形对象添加到舞台中去stage.addChild(circle);
更新舞台stage.update();
如果需要根据指定的帧频率变化舞台，继续看下方：
8.设置帧频率计时模式createjs.Ticker.timingMode = createjs.Ticker.RAF;
9.设置刷新频率fsp值createjs.Ticker.framerate = 10;即10fsp，1/10秒的速度刷新。
10.设置Ticker的tick事件监听createjs.Ticker.addEventListener("tick", func);
11.定义func；通过tick事件，会根据指定的频率执行该func函数；所有对舞台的操作在这里处理即可，记得更新舞台stage.update();
*注意点：
1.默认的计时模式为createjs.Ticker.TIMEOUT，
2.RAF计时模式下，framerate无效，
3.RAF模式下动画效果更流畅，
4.不需要按指定帧频率时，可使用RAF计时模式
基础使用的示例代码：
上述代码示例效果图
html5游戏制作raf HTML5之弧度角度与sincos(五角星绘制) Canvas图形组合 阴影 图像绘制及createJS应用...
