分享更有价值
被信任是一种快乐

怎么用html5的canvas跳一跳小游戏效果

文章页正文上

这篇文章主要介绍了怎么用html5的canvas跳一跳小游戏效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用html5的canvas跳一跳小游戏效果文章都会有所收获,下面我们一起来看看吧。  要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果。这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然后快速的播放它们,在人的眼睛看来就是一个完整的动画效果。
  制作canvas动画的基本步骤
  下面是你在canvas上绘制一个动画帧的基本步骤:
  1、清空canvas:除了背景图像之免费云主机、域名外,你需要清空之前绘制的所有图形。
  2、保存canvas的状态:如果在这一步中你使用了不同的绘图状态(例如描边大小和填充色等),并且你想在绘制每一帧时使用相同的原始状态,你需要保存这些原始状态。
  3、绘制动画图形:这一步中你需要绘制那些动画的图形元素。
  4、恢复canvas状态:如果你之前保存过canvas的状态,在这一步中将它们恢复。
  控制canvas动画
  我们需要一种方法来在指定时间内执行我们的绘制图形函数。有两种方式可以控制动画的执行。
  第一种是使用下面的三个window对象上的方法:window.setInterval(),window.setTimeout()和window.requestAnimationFrame()。它们都能在指定时间内调用指定的函数。
  setInterval(function, delay):在每delay毫秒时间内反复执行function指定的函数。
  setTimeout(function, delay):在delay毫秒内执行function指定的函数。
  requestAnimationFrame(callback):通知浏览器你需要执行一个动画,并请求浏览器调用指定的函数来在下一次重绘前更新动画。
  第二种方法是使用事件监听。例如你需要做一个小游戏,你可以监听键盘和鼠标的事件,然后在捕获相应的事件时使用setTimeout()方法来制作动画效果。
  为了获得更好的动画性能,我们通常使用requestAnimationFrame()方法。当浏览器装备好绘制下一帧动画时,我们可以将绘制函数作为参数传入这个方法中。
  通过在浏览器准备画下一帧的时候,给浏览器发出信号,可以使浏览器对你的动画进行硬件加速,这比使用setTimeout()来绘制动画效果会好得多。
  下面是一段示例代码:
  function animate() {
  reqAnimFrame = window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame;
  reqAnimFrame(animate);
  draw();
  }
animate()函数首先会获取requestAnimationFrame()函数的一个引用。注意在不同的浏览器中会使用不同的名称。变量reqAnimFrame会在不同的浏览器中设置为不同的值,总之它不能为空。
然后reqAnimFrame()方法被调用,并将animate()函数作为参数传入。当浏览器准备好绘制下一帧动画时,animate()函数就会被调用。
最后,animate()函数会调用draw()方法。draw()方法在上面的代码中没有写出来,它实际上做的事情就是前面提到的绘制一个动画帧的4个步骤:清空canvas,保存状态,绘制图形,恢复状态。
还有一件需要注意的事情是animate()函数必须被调用一次来启动动画,否则requestAnimationFrame()函数将永远不会被调用,动画也不会被正常执行。关于“怎么用html5的canvas跳一跳小游戏效果”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么用html5的canvas跳一跳小游戏效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: CSS原生嵌套语法怎么使用

本文小编为大家详细介绍“CSS原生嵌套语法怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS原生嵌套语法怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。所谓的嵌套,就是将一个 CSS 规则放在另一个(嵌套规则)中,…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册