(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用

弧度与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值的介绍：

1. source-over：新图形覆盖原图形，其他部分正常显示
2. destination-over：原图形覆盖新图形，其他部分正常显示
3. source-in：只显示在原图形里面的新图形，其他部分透明
4. destination-in：只显示在新图形里面的原图形，其他部分透明
5. source-out：只显示在原图形之外的新图形，其他部分透明
6. destination-out：只显示在新图形之外的原图形，其他部分透明
7. source-atop：新图形只绘制在原图形之上，原图形其他部分正常显示
8. destination-atop：原图形只绘制在新图形之上，原图形其他部分正常显示
9. lighter：重叠部分变亮，其他部分正常显示
10. darker：重叠部分变暗，其他部分正常显示
11. xor：重叠部分透明，其他部分正常显示
12. 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画布上。

绘制流程：

1. 创建一个图片对象，用来承载图像 var img = new Image();
2. 设置图像源 img.src = "xxx.jpg;"
3. 监听图像对象的onload事件，图像加载完成后会执行该事件指定的函数 img.onload = draw
4. 在onload制定的draw函数中通过drawImage方法将img对象中的图像绘制到canvas画布中

drawImage的3种方法：

1. drawImage(img,destX,destY)：以画布的destX、destY作为图像显示起始点，将整个img图像按图像原始像素绘制到画布中，超出画布不绘制；

2. drawImage(img,destX,destY,destWidth,destHeight)：将整个img图像绘制到画布中，以画布的destX、destY作为显示图像的起始点，destWidth、destHeight作为图像的显示大小；若destWidth、destHeight大于图像原始像素，则图像会放大(会模糊)；反之则缩小。

3. 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如何使用？

1. 引入easeljs的js文件
2. 在body元素中创建一个canvas元素
3. 基于canvas元素创建一个createjs的舞台 var stage = new createjs.Stage("demoCanvas");
4. 创建需要被添加到舞台的对象，如创建一个图形对象 var circle = new createjs.Shape();
5. 对图形对象进行处理，如画一个圆circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
6. 将图形对象添加到舞台中去 stage.addChild(circle);
7. 更新舞台 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计时模式

基础使用的示例代码：

    
    
    
    
    



您的浏览器不支持

上述代码示例效果图