html5游戏制作raf,HTML5之弧度角度与sincos(五角星绘制)、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值的介绍:
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应用...相关推荐
- html5 游戏制作教程,html5一步步实现超级玛丽游戏制作(新手教程源码)
[实例简介] [实例截图] [核心代码] My first Game body { border:none 0px; margin:0px; padding:10px; font-size : 16p ...
- html5游戏制作入门系列教程(八)
今天,我已经准备了一个新的游戏 – SkyWalker.基本上 – 这是用飞飞行模拟射击类游戏.我们的目标到达终点线.这个游戏还有其它一些特点,例如使用飞机运动动画和爆炸动画,多按键处理(例如同时移动 ...
- html5游戏制作入门系列教程(七)
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.我们将要更新完善我们的第4课html5游戏制作入门系列教程(四)的游戏实例,并增加了火球,敌人和碰撞检测等功能模块.所以,现在我们的 ...
- html5游戏制作入门系列教程(六)
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.今天,我们将创建我们的第一个完整的游戏 – 打砖块.在这一课中,我会告诉你如何检测基本的碰撞和HTML5的本地存储.您可以使用鼠标和 ...
- html5游戏制作入门系列教程(五)
我们继续这一系列文章,使用HTML5的canvas组件进行游戏开发.今天,这是相当完整的游戏例子 – 它会回顾经典的旧电脑游戏 – 坦克大战.我会教你使用阵列地图并教你如何检测活动对象(坦克)与环境( ...
- html5游戏制作入门系列教程(四)
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.今天我们要学习下元素:声音控制与动画.在我们的演示中,你会 看到一个飞龙.我们会听到持续的翅膀拍打的声音(我们将循环这个声音), ...
- html5游戏制作入门系列教程(三)
今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发.接下来,我们将开始学习如何添加动画以及一些更有趣的功能.我 们的演示将包括一艘太空船飞越时空,并使用一个新的游戏元素 – 对话框 ...
- html5游戏制作入门系列教程(二)
今天,我们继续html5游戏制作入门系列的系列文章.今天,我们将继续基础知识(也许甚至是高级技巧的基础).我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要 ...
- html5游戏制作入门系列教程(一)
从今天开始,我们将开始HTML5游戏开发一系列的文章.在我们的第一篇文章中,我们将讲解在画布canvas上的基础工作,创建简单的对象,填充和事件处理程序.另外,要注意在这个阶段中,我们不会立即学习We ...
最新文章
- python elementtree 父节点_python-访问ElementTree节点父节点
- IT人士还是要善待自己
- 配置 Spring.NET
- 单行文字压缩处理(要指定字体)
- S3C2410 bootloader ----VIVI阅读笔记 (转)下
- oracle中使用sql查询时字段为空则赋值默认
- poj2393 其它贪心 挑战程序设计竞赛
- OAuth2.0授权协议的一个简单解释
- nmap扫描局域网存活主机_第十五天Nmap篇:每日一练之Kali Linux面试题
- 地图距离算法_基于权重的地图匹配技术
- bzoj千题计划176:bzoj1199: [HNOI2005]汤姆的游戏
- stolz定理考研能用吗_这些高数定理,2021二战考研租房的你千万别记混
- ThinkPHP第七天(F函数使用,项目分组配置,项目分组模板文件放置规则配置)
- 对计算机硬盘格式化,电脑硬盘格式化和快速格式化的区别
- hb运行到微信小程序出现报错:[微信小程序开发者工具] ? Enable IDE Service (y/N) [27D[27C
- Canonical Coin Systems
- 思科http服务器显示设置,思科里面的服务器怎么设置
- windows计算器(calc)按键功能详解
- 任意数据库,一样快!——云和恩墨全新通用数据库一体机 zData X 上市
- 使用jdk查看jks文件信息
热门文章
- 你需要计算机管理员 提供的权限才能对此文件进行更...
- 小白入门的网络安全常用术语
- 树莓派c语言cpu温度,读取树莓派4B处理器(CPU)的实时温度
- 失眠吃什么食物节失眠?
- 【Windows Jmeter压测端口占用问题解决】
- Android打开和关闭输入法
- python绘制图形沙漏_前端每日实战:118# 视频演示如何用纯 CSS 创作一个沙漏 loader...
- 【机器人开车】ubuntu16.04+北斗星通接收机差分平台初始化【三】
- Android开发模式之观察者模式
- 【静态分析】【系列1-南大软件分析】1.0 导论学习笔记