html5游戏制作raf,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为半径,为斜边长

c0cb4d6754322bd19709f159a13a489d.png

关系图解

故围绕中心点(0,0)旋转求值:dx = cos(angle) * r,dy = sin(angle) * r

注:若中心点为(10,20),则dx = 10 + cos(angle) * r,dy = 20 + sin(angle) * r

五角星代码示例1

1990f860153c1d0e285ce4e56d7348da.png

上述代码效果图

五角星代码示例2

3a05ed4a9194c1b1d13a5b3246f7eb99.png

上述代码示例效果图

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

6da43cbe68b292739f6f0ada08fe8665.png

type为xor的效果图

Canvas绘制阴影效果

功能:

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

使用方法:

shadowOffsetX:距离图形当前坐标轴x轴的偏移量,默认值为0

shadowOffsetY:距离图形当前坐标轴y轴的偏移量,默认值为0

shadowColor:阴影的颜色,默认值为fully-transparent black,即透明

shadowBlur:阴影的模糊程度,默认值为0

代码示例:

ed37b267267a69985929429d45c54e3f.png

上述代码效果图

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

示例代码:

218e4d1cb8a9b098d1ae9255d0020491.png

上述代码示例效果图

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

基础使用的示例代码:

7446a38d18a608ae649b4ebb230857f3.gif

上述代码示例效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值