本例来自于《HTML5 Canvas核心技术 图形、动画与游戏开发》

在线演示 （图有点多，请多刷新几次）

本例还有一点代码不理解，我用注释和问号标注出来了，有大神看到求解答，谢谢

本例子难点主要在通过当前的FPS计算图像下一帧的显示坐标，这也是我不理解的地方

还有就是requestAnimationFrame这个，这个是用来以浏览器最合适的方式循环执行一些代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>图片运动实例</title>
  6. <style type="text/css">
  7. body {
  8. background: #DDDDDD;
  9. }
  10. #canvas {
  11. border: thin solid black;
  12. }
  13. input {
  14. margin-left: 15px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <canvas id="canvas" width="1000" height="440">
  20. 您的浏览器不支持canvas，请更新到最新的浏览器
  21. </canvas>
  22. <input type="button" name="animateButton" id="animateButton" value="运动" />
  23. <hr />
  24. <div>
  25. <table border="1" cellspacing="" cellpadding="">
  26. <tr>
  27. <td>FPS</td>
  28. <td><span id="FPS"></span></td>
  29. </tr>
  30. <tr>
  31. <td>SKY_VELOCITY/fps</td>
  32. <td><span id="SKY_VELOCITY"></span></td>
  33. </tr>
  34. <tr>
  35. <td>GRASS_VELOCITY/fps</td>
  36. <td><span id="GRASS_VELOCITY"></span></td>
  37. </tr>
  38. <tr>
  39. <td>TREE_VELOCITY/fps</td>
  40. <td><span id="TREE_VELOCITY"></span></td>
  41. </tr>
  42. <tr>
  43. <td>FAST_TREE_VELOCITY/fps</td>
  44. <td><span id="FAST_TREE_VELOCITY"></span></td>
  45. </tr>
  46. </table>
  47. </div>
  48. </body>
  49. <script type="text/javascript">
  50. var canvas = document.getElementById("canvas"),
  51. context = canvas.getContext("2d"),
  52. animateButton = document.getElementById("animateButton"),
  53. //创建多个图像对象
  54. sky = new Image(),
  55. tree = new Image(),
  56. nearTree = new Image(),
  57. grass = new Image(),
  58. grass2 = new Image(),
  59. redRect = new Image,
  60. paused = true,
  61. lastTime = 0,
  62. fps = 0,    //当前的帧速率
  63. //都是不同图像
  64. skyOffset = 0,
  65. grassOffset = 0,
  66. treeOffset = 0,
  67. nearTreeOffset = 0,
  68. TREE_VELOCITY = 20,
  69. FAST_TREE_VELOCITY = 40,
  70. SKY_VELOCITY = 8,
  71. GRASS_VELOCITY = 75;
  72. //以下是检测对象
  73. var SKY_VELOCITYFps = document.getElementById("SKY_VELOCITY");
  74. var GRASS_VELOCITYFps = document.getElementById("GRASS_VELOCITY");
  75. var TREE_VELOCITYFps = document.getElementById("TREE_VELOCITY");
  76. var FAST_TREE_VELOCITYFps = document.getElementById("FAST_TREE_VELOCITY");
  77. var FPS = document.getElementById("FPS");
  78. //擦除方法
  79. function erase() {
  80. context.clearRect(0, 0, canvas.width, canvas.height);
  81. }
  82. function draw() {
  83. context.save();
  84. //fps是共用的
  85. //应该是确定当前图像位置的坐标X
  86. //???以下四行还是有点不太理解，只知道这个可以用来循环的显示image对象，至于SKY_VELOCITY/fps是什么还不清楚
  87. skyOffset = skyOffset < canvas.width ? skyOffset + SKY_VELOCITY/fps : 0;
  88. grassOffset = grassOffset < canvas.width ? grassOffset + GRASS_VELOCITY/fps : 0;
  89. treeOffset = treeOffset < canvas.width ? treeOffset + TREE_VELOCITY/fps : 0;
  90. nearTreeOffset = nearTree < canvas.width ? nearTree + FAST_TREE_VELOCITY/fps : 0;
  91. //检测数据
  92. SKY_VELOCITYFps.innerHTML = SKY_VELOCITY/fps;
  93. GRASS_VELOCITYFps.innerHTML = GRASS_VELOCITY/fps;
  94. TREE_VELOCITYFps.innerHTML = TREE_VELOCITY/fps;
  95. FAST_TREE_VELOCITYFps.innerHTML = FAST_TREE_VELOCITY/fps;
  96. FPS.innerHTML = fps;
  97. //像下面几行这样写的后果：canvas运动到后面的时候就可能没有图像对象了
  98. //          skyOffset += SKY_VELOCITY/fps;
  99. //          grassOffset += GRASS_VELOCITY/fps;
  100. //          treeOffset += TREE_VELOCITY/fps;
  101. //          nearTreeOffset += FAST_TREE_VELOCITY/fps;
  102. //开始绘制天空
  103. context.save();
  104. //改变坐标原点
  105. context.translate(-skyOffset, 0);
  106. //绘制一个天空
  107. context.drawImage(sky, 0, 0);
  108. //在即将天空结尾的时候在绘制一个天空用来衔接
  109. context.drawImage(sky, sky.width-2, 0);
  110. //将改变的坐标原点改回来
  111. context.restore();
  112. //开始绘制远处的树
  113. //此处绘制的位置有的地方出现在canvas.width之外
  114. context.save();
  115. //改变坐标原点
  116. context.translate(-treeOffset, 0);
  117. //以改变原点后的坐标上绘制好多个树
  118. context.drawImage(tree, 100, 240);
  119. context.drawImage(tree, 1100, 240);
  120. context.drawImage(tree, 400, 240);
  121. context.drawImage(tree, 1400, 240);
  122. context.drawImage(tree, 700, 240);
  123. context.drawImage(tree, 1700, 240);
  124. //恢复坐标原点
  125. context.restore();
  126. //绘制近处的树木，他的运行速度更加的块
  127. context.save();
  128. context.translate(-nearTreeOffset, 0);
  129. context.drawImage(nearTree, 250, 220);
  130. context.drawImage(nearTree, 1250, 220);
  131. context.drawImage(nearTree, 800, 220);
  132. context.drawImage(nearTree, 1800, 220);
  133. context.restore();
  134. //绘制绿地
  135. context.save();
  136. context.translate(-grassOffset, 0);
  137. //在canvas底部绘制草地image对象
  138. context.drawImage(grass, 0, canvas.height-grass.height);
  139. context.drawImage(grass, grass.width, canvas.height-grass.height);
  140. context.drawImage(grass2, 0, canvas.height-grass2.height);
  141. context.drawImage(grass2, grass2.width, canvas.height-grass2.height);
  142. context.restore();
  143. }
  144. //计算当前的FPS
  145. function calculateFps(now) {
  146. //1000毫秒除以距离上一次计算FPS的时间意思是，或者距离上一次绘制图像
  147. //这段时间里面执行了多少次
  148. //除以1000是因为now和lastTime都是以毫秒为单位的
  149. //反正fps就是一秒内能够执行绘制多少次嘛~所以的
  150. var fps = 1000 / (now - lastTime);
  151. lastTime = now;
  152. return fps;
  153. }
  154. function animate(now) {
  155. //如果当前时间还没有定义
  156. if(now === undefined) {
  157. //就把当前时间赋值给now
  158. now = +new Date;
  159. }
  160. fps = calculateFps(now);
  161. //只要不是暂停状态就执行
  162. if(!paused) {
  163. //擦除canvas
  164. //原例子中是用兼容的手法实现requestAnimationFrame，所以需要erase
  165. //              erase();
  166. //马上绘制新的
  167. draw();
  168. }
  169. //以最适合的速度执行animate中的内容，这个比较适合动画的处理，类似于setTimeout
  170. requestAnimationFrame(animate);
  171. }
  172. animateButton.onclick = function(e) {
  173. paused = paused ? false : true;
  174. if(paused) {
  175. animateButton.value = "运动";
  176. } else {
  177. animateButton.value = "暂停";
  178. }
  179. };
  180. //      canvas.width = canvas.width;
  181. //      canvas.height = canvas.height;
  182. sky.src = "sky.png";
  183. tree.src = "smalltree.png";
  184. nearTree.src = "tree-twotrunks.png";
  185. grass.src = "grass.png";
  186. grass2.src = "grass2.png";
  187. sky.onload = function(e) {
  188. draw();
  189. };
  190. //      requestAnimationFrame(animate);
  191. //启动
  192. animate();
  193. </script>
  194. </html>

【实例】html5-canvas中实现背景图片的移动的更多相关文章

  1. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  2. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  3. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  4. 关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg)"> (这事设置背景图片) <img src="images/bbs_student1.gif" />如果是这样的就是直接插入图片。你看看,...

    关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg ...

  5. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  6. Html5 Canvas 实现滚动的图片

    今天一直在找html5 canvas的使用实例.想画一张地图,再画个小车在上面跑.运气好找到了一个大神写的js代码.该代码实现了图片的左右来回滚动,现在粘贴在博客里记录一下: <html> ...

  7. Cocos2d-x优化中关于背景图片优化

    由于背景图片长时间在场景中保存,而且图片很多,我们可以对其进行一些优化.我们通过如下几个方面考虑优化:1.不要Alpha通道背景图片的特点是不需要透明的,所以纹理格式可以采用不带有Alpha通道格式, ...

  8. Qt中添加背景图片的方法

    工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和QPushButton,QFrame做主面板,QPushButton为其子控件,需要在主面板上贴背景图片,还需要在QPushButton ...

  9. android 项目中设置背景图片

    xml文件设置背景图片中:任意一个控件,button imageView 或layout,在其的xml属性设置中,添加 [XML] view plaincopy android:background= ...

随机推荐

  1. Iframe 在项目中的使用总结

    参考:http://www.cnblogs.com/MaxIE/archive/2008/08/13/1266597.html 问题一:首先我们用iframe加载页面,第一个需要解决的问题是高度自适应 ...

  2. jquery mobile 图片自适应问题

    解决办法: 加入一段css <link rel="stylesheet" href="http://jquerymobile.com/demos/1.1.0/doc ...

  3. background属性

    background: url(images/01.jpg) 0 10px; 效果: background: url(images/01.jpg) 0 -10px; 效果: *注释:10px 是网上去 ...

  4. live555库中的openRTSP实例

    一.openRTSP编译运行 a)windows下编译运行 还是以mediaServer作为服务端,openRTSP作为客户端 b)Linux下编译运行 转自http://kuafu80.blog.1 ...

  5. Description DisplayName Display的关系

    Description  DisplayName  Display的关系 ?

  6. 未能加载文件或程序集“MySQLDriverCS

    未能加载文件或程序集“MySQLDriverCS, Version=3.0.1735.36021, Culture=neutral, PublicKeyToken=172f94dfb0faf263”或 ...

  7. PHP中的ob_start用法详解

    用PHP的ob_start();控制您的浏览器cache Output Control 函数可以让你自由控制脚本中数据的输出.它非常地有用,特别是对于:当你想在数据已经输出后,再输出文件头的情况.输出 ...

  8. Eclipse里项目名有红叉，但是底下的每一个文件都没有红叉

    如果是因为java compiler level does not match the version of the installed java, 那么我们打开项目的properties,有一个选项 ...

  9. DWZ框架中ajax提交文件表单的处理(关闭当前dialog + 刷新父级navTab)

    先重点关注两个js文件:dwz.ajax.js和dwz.core.js 流程: 1.回调iframeCallback <form xx enctype="multipart/form- ...

  10. Linux后台执行脚本文件,nohup

    看运维人员执行nohup命令后,把程序放在后台执行,很高大上,就研究了一下,这个命令. nohup命令及其输出文件 nohup命令:如果你正在运行一个进程,而且你觉得在退出帐户时该进程还不会结束,那么 ...