【实例】html5-canvas中实现背景图片的移动

时间：2022-11-02 14:44:40

本例来自于《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表格中插入背景图片的问题&lowbar;百度知道 3个回答 - 提问时间&colon; 2009年03月23日 最佳答案&colon; &lt&semi;tr style&equals;&quot&semi;background-image&colon;url&lpar;1&period;jpg&rpar;&quot&semi;&gt&semi; &lpar;这事设置背景图片&rpar; &lt&semi;img src&equals;&quot&semi;images&sol;bbs&lowbar;student1&period;gif&quot&semi; &sol;&gt&semi;如果是这样的就是直接插入图片。你看看&comma;&period;&period;&period;

    关于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. 从AdventureWorks学习数据库建模——保留历史数据

    在业务需求中,经常需要我们在系统中能够记录历史信息,能够查看到历史变动情况,这时我们可以通过增加开始结束时间字段来记录数据的历史版本.对数据的历史记录主要分为:关系.属性历史,实体历史和变更历史. 关 ...

  2. java07课堂作业

    一.动手动脑:多层的异常捕获-1 阅读以下代码(CatchWho.java),写出程序运行结果: public class CatchWho { public static void main(Str ...

  3. &period;NET常用类库--苏飞合集

    在线网站:http://tool.sufeinet.com/CodePreview/CodeView.aspx?action=view&file=Zip/SharpZip.cs C#基类库大全 ...

  4. 第二百八十七天 how can I 坚持

    终于把假请下来了,没有想象的那么复杂. 忘退车票了.明天应该有手续费了,现在又维护了,哎.10%的手续费了.7块钱,没了.希望不会白回去一趟啊. sql,group by  having .还是学不会 ...

  5. CAGradientLayer颜色渐变器

    使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件 @interface CAGradientLayer : CALayer @property(nullable, copy) ...

  6. 如何通过jmeter使用beanshell进行关联

    关联,大多数都是通过响应的信息抓取部分信息,例如session或者hidden等 在jmeter中要使用关联,分为以下2步: Step 1. 在Sampler请求下添加正则表达式,获得信息,添加 &g ...

  7. &lbrack;转&rsqb; Mongoose简要API

    Mongoose是在node.js环境下对mongodb进行便捷操作的对象模型工具 因此,要使用mongoose,则必须安装node.js环境以及mongodb数据库.mongoose使mongodb ...

  8. SQL语句执行的顺序机制

    From Where Group by Having Select 表达式 Distinct ORDER BY TOP/OFFSET-FETCH

  9. hadoop-1&lpar;单机模式配置&rpar;

    下一次的目标是: 把Hadoop的伪分布式配置出来 1:ssh免密码登陆第一步 2:安装java环境 3:安装hadoop2

  10. 个人理解的Lambda表达式的演化过程

    之前在组内进行过相关分享,为防止以后再单独整理,故在此将自己的PPT内容存放下. 所以,多数代码都是以图片的方式展现. 委托 什么是委托? 定义:委托是方法的抽象,它存储的就是一系列具有相同签名和返回 ...

相关文章