本例来自于《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. Only one statement is allowed per batch. A batch separator, such as 'GO', might be required between statements.

    When I added the file in VS I forgot to set Build Action = None from the file properties.

  2. Effective Objective-C 2.0 — 第五条用枚举表示状态、选项、状态码 （未看完）

    枚举是一种常量命名方式.某个对象所经历的各种状态就可以定义为一个简单的枚举集.(enumeration set) 编译器会为枚举分配一个独有的编号,从0开始,每个枚举递增1.实现枚举所用的数据类型取决 ...

  3. Android Studio-设置代码自动提示

    None:代表模糊匹配(推荐). First Letter: 根据首字母进行匹配. All:与First Letter类似,不过匹配结果比First Letter多.

  4. 【帖子】怎么彻底删除kafka的topic，然后重建？

    怎么彻底删除kafka的topic,然后重建? 网上都说用kafka-run-class.shkafka.admin.DeleteTopicCommand 命令删除topic,但是并没有成功,用kaf ...

  5. 关于shell脚本时遇value too great for base (error token is "08")

    今天在书写一个定时cp脚本时遇到了一个问题,value too great for base (error token is "08") 在网上查看到原来是以0开头的数字 系统会默 ...

  6. Unity3D

    一.安装配置 1.下载页面:http://unity3d.com/get-unity 分个人版本和专业版,个人版免费,但少了很多功能(主要是渲染相关,具体请看官方说明), 专业版是每月 75$ 或一次 ...

  7. [原] Jenkins Android 自动打包配置

    一.Jenkins自动打包配置 目标:1. 自动打包:2. 自动上传:3. 友好下载 1. Jenkins简介 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作. 减少重复劳 ...

  8. Exception→"Source":"EntityFramework" "Message" :"更新条目时出错。有关详细信息，请参阅内部异常。"

    给一个数据库中类型为"datetime"的列赋值为 "DateTime.MinValue"...... 而// ::} But--01到9999-- :: 到 ...

  9. 闲扯json取值，联想map取值。

    将list转json(list中的Bean的属性名称为变量,若为常量没必要采用此方式,直接转实体类即可) JSONArray json = JSONArray.fromObject(list); fo ...

  10. mysql 表锁问题

    select * from information_schema.INNODB_lock_waits; select * from information_schema.INNODB_locks; S ...