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

时间:2019-12-06 发布者: 访问量:3876

弧度与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为半径,为斜边长
(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用_第1张图片
关系图解

故围绕中心点(0,0)旋转求值:dx = cos(angle) * r,dy = sin(angle) * r
注:若中心点为(10,20),则dx = 10 + cos(angle) * r,dy = 20 + sin(angle) * r

五角星代码示例1

(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用_第2张图片
上述代码效果图
五角星代码示例2

(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用_第3张图片
上述代码示例效果图

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属性


(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用_第4张图片
type为xor的效果图

Canvas绘制阴影效果


功能:

为ctx设置阴影效果后,在当前ctx状态下,canvas中绘制的图像都将出现阴影。

使用方法:
  • shadowOffsetX:距离图形当前坐标轴x轴的偏移量,默认值为0
  • shadowOffsetY:距离图形当前坐标轴y轴的偏移量,默认值为0
  • shadowColor:阴影的颜色,默认值为fully-transparent black,即透明
  • shadowBlur:阴影的模糊程度,默认值为0
代码示例:

(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用_第5张图片
上述代码效果图

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,图像会放大即模糊;反之则缩小)

示例代码:

(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用_第6张图片
上述代码示例效果图

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计时模式

基础使用的示例代码:

(第五天)HTML5之弧度角度与sin&cos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用_第7张图片
上述代码示例效果图
发布于
  用户评论
    生活编程