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

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

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

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

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

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

[html] view plain copy

print?

  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>
时间： 2024-10-31 22:16:49

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

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

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

HTML5 canvas 中的arcTo()方法的用法

除了arc()之外,Canvas的绘图环境对象还提供了另一个用于创建圆弧路径的方法,那就是arcTo().改方法接受了5个参数: arcTo(x1,x2,y1,y2,radius) arcTo()方法的参数分别代表两个点击圆形半径.该方法一指定的半径来绘制一条圆弧,此圆弧与当前点到第一个点(x1,y1)的连线相切,而且第一个点到第二点(x2,y2)的连线也相切.该方法的这些特性,使得它非常适合用了绘制矩形的原角. 使用arcTo()方法: html: <!Doctyp html> <ht

防止网页中的背景图片被另存为

防止网页中的背景图片被另存为,可以用下述办法: 先建A层,在样式里为A层设好背景图,然后在A层里设B层,并且把B层大小和A层设成一样,这样A层的背景就不能被另存为. <!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>示例</title>&l

Qt中添加背景图片的方法

Qt中添加背景图片的方法 1. QPalette的方法 #include <QApplication>#include <QtGui> int main(int argc, char *argv[]){    QApplication app(argc,argv);        QFrame *frame = new QFrame;    frame->resize(400,700);    QPixmap pixmap("images/frame.png&quo

Html5 Canvas 实现滚动的图片

今天一直在找html5 canvas的使用实例.想画一张地图,再画个小车在上面跑.运气好找到了一个大神写的js代码.该代码实现了图片的左右来回滚动,现在粘贴在博客里记录一下: <html> <head> <meta charset="utf-8" /> <title>LScroll5.html</title> <script type="text/javascript"> var LScroll

html5 canvas精美花纹背景图像插件

这是一款可以在指定容器中生成精美网页背景花纹图像的js插件.该花纹背景插件使用js来生成html5 canvas,并在其中绘制各种花纹图像.背景花纹图像可以是静态的,也可以制作成动态花纹. 在线演示:http://www.htmleaf.com/Demo/201502101358.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201502101357.html

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

由于背景图片长时间在场景中保存,而且图片很多,我们可以对其进行一些优化.我们通过如下几个方面考虑优化:1.不要Alpha通道背景图片的特点是不需要透明的,所以纹理格式可以采用不带有Alpha通道格式,所以RBG565格式比较适合背景图片.2.拼图背景图片与其它的图片纹理格式的不同,我们在创建精灵表的时候,没有办法将RBG565格式的背景图片与其它的纹理图片(如:RGBA4444)做在一个精灵表,所以基于格式的考虑我们可以将多个背景放置在一个精灵表中的,但是要注意这个精灵表拼接成的大图文件不能太大

HTML5 Canvas中的贝塞尔曲线

在HTML5提供的画布功能,也就是Canvas中,getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.本文以getContext("2d")中提供的方法为例,简要研究了其中用于绘制曲线路径的贝塞尔曲线. JavaScript中的getContext("2d")为我们提供了两种绘制贝塞尔曲线路径的方法,分别是quadraticCurveTo()用于绘制二次贝塞尔曲线和bezierCurveTo()用于绘制三次贝塞尔曲线. 什么是贝塞

css 中的背景图片小技巧和存在的坑

body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position:center 0;   背景图的定位原点,由于body高不确定 background-attachment:fixed;  背景图片保持固定,不会随页面滚动而滚动 第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变 首先给html 设置 height:100%; 给body设置 bac