本例来自于《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. css教程

    网址:http://www.aa25.cn/layout/index.shtml

  2. new和alloc init的区别

    背景说明,new是较为老式的写法,后来发现只有一个new不好使,才引入了alloc和init这种写 法,保留new一是向后兼容,二是很多时候是一种更简单的写法.其实是一样的,new在内部调用 的all ...

  3. sky

    UniSky入门资料 http://game.ceeger.com/forum/read.php?tid=4069

  4. C#如何把List of Object转换成List of T具体类型

    上周码程序的时候碰到个问题,因为设计上的约束,一个方法接受的参数只能为List<object>类型,然而该方法需要处理的真实数据则是确定的List<Currency>.然而C# ...

  5. Make命令

    Make命令 一.Make的概念 Make这个词,英语的意思是"制作".Make命令直接用了这个意思,就是要做出某个文件.比如,要做出文件a.txt,就可以执行下面的命令. $ m ...

  6. JSP的原理

    一.什么是JSP JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大特点在于,写JSP就行html, ...

  7. 把字符转换为 HTML 实体

    把字符转换为HTML实体:htmlentities() 把HTML实体转换回字符:html_entity_decode() 把预定义的字符 "<" (小于)和 "& ...

  8. 解决子元素margin让父辈元素位置一起改变的问题

    1.在父元素内添加内容,并且要在子元素块前面添加,后面添加内容无效. 内容可以是文字.图片甚至是空格,源代码里直接按空格无效,可以用占位符  2.让子元素或父元素浮动float:left. 缺点:在元 ...

  9. 总结Spring、Hibernate、Struts2官网下载jar文件

    一直以来只知道搭SSH需要jar文件,作为学习的目的,最好的做法是自己亲自动手去官网下.不过官网都是英文,没耐心一般很难找到下载入口,更何 况版本的变化也导致不同版本jar文件有些不一样,让新手很容易 ...

  10. Storm与Spark Streaming比较

    前言spark与hadoop的比较我就不多说了,除了对硬件的要求稍高,spark应该是完胜hadoop(Map/Reduce)的.storm与spark都可以用于流计算,但storm对应的场景是毫秒级 ...