HTML5 Canvas双缓存实例

标签： html5 canvas 缓存 | 发表时间：2013-12-15 10:43 | 作者：CshBBrain
出处：http://www.iteye.com

转自：http://www.108js.com/article/article3/30046.html?id=255

 

下面是用HTML5的<canvas>标签写的一个视差滚动动画的示例。采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象。绘图时先将图像绘制到缓冲Canvas中，等到每一桢的图像绘制完全后在把整个缓冲Canvas绘制到页面Canvas中。前景、中景、远景的视差通过控制移动速度来实现。整个动画的绘制部分只使用了Context对象的drawImage()方法。


<html>
<body>
  <canvas id="canvas" width="600" height="400"> 
   <p>Your browser does not support the canvas element</p> 
  </canvas> 
</body>
<script>

const FPS = 30;  
 const SECONDS_BETWEEN_FRAMES = 1 / FPS;  
  
 var bg0 = new Image();  
 var bg1 = new Image();  
 var bg2 = new Image();  
  
 var x = 0;  
 const RATE = 50 * SECONDS_BETWEEN_FRAMES;  
 const WIDTH = 600;  
 const HEIGHT = 320;  
  
 var canvas;  
 var canvasBuffer;  
 var context;  
 var contextBuffer;  
  
 window.onload = init;  
  
 function init() {  
    bg0.src = "b0.png";  
    bg1.src = "b1.png";  
    bg2.src = "b2.png";  
      
    canvas = document.getElementById("canvas");  
    canvasBuffer = document.createElement("canvas");  
    canvasBuffer.width = canvas.width;  
    canvasBuffer.height = canvas.height;  
    context = canvas.getContext("2d");  
    contextBuffer = canvasBuffer.getContext("2d");  
    context.clearRect(0, 0, canvas.width, canvas.height)  
    contextBuffer.clearRect(0, 0, canvasBuffer.width, canvasBuffer.height);  
      
    setInterval(animation, SECONDS_BETWEEN_FRAMES);  
}  
  
function animation() {  
    x += RATE;  
      
    context.clearRect(0, 0, canvas.width, canvas.height)  
    contextBuffer.clearRect(0, 0, canvasBuffer.width, canvasBuffer.height);  
      
    drawBuffer(bg0, 0, 0, 0.5);  
    drawBuffer(bg1, 0, 100, 0.75);  
    drawBuffer(bg2, 0, 100, 1);  
    context.drawImage(canvasBuffer, 0, 0);  
}  
  
function drawBuffer(image, dx, dy, factor) {  
    var left = (x * factor) % image.width;  
    if (left + WIDTH >= image.width) {  
        var d0 = image.width - left;  
        var d1 = WIDTH - d0;  
        contextBuffer.drawImage(image, left, 0, d0, HEIGHT, dx, dy, d0, HEIGHT);  
        contextBuffer.drawImage(image, 0, 0, d1, HEIGHT, dx + d0, dy, d1, HEIGHT);  
    }  
    else {  
        contextBuffer.drawImage(image, left, 0, WIDTH, HEIGHT, dx, dy, WIDTH, HEIGHT);  
    }  
}

</script>
</html>
  顺带一提的是在Canvas画布中绘制图形，一般情况下后绘制的会覆盖先绘制的，所以在绘制图像的时候需要先绘制远景b0，再绘制中景b1，最后绘制近景b2。



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [html5 canvas 缓存] 推荐：

HTML5 Canvas双缓存实例

- - Web前端 - ITeye博客
转自：http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的标签写的一个视差滚动动画的示例. 采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理，在此稍稍交代一下. 与matlab处理图像类似的是，这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置.

备份：html5 canvas cheat sheet

- - 膘叔
纯备份资料,HTML5的canvas资料.

HTML5 Canvas: 测试浏览器是否支持Canvas

- - CSDN博客Web前端推荐文章
本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后，我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说，如果上下文不存在的话，Canvas也就名存实亡了. 测试浏览器是否支持Canvas有好几种方法.

HTML5 Canvas开发框架：CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

25 超棒的 HTML5 Canvas 游戏

- 迎客松 - LinuxEden开源社区-Linux伊甸园
Canvas 元素作为HTML5标准的一部分，允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端，使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.

HTML5 Canvas(画布)教程 – 图像处理

- - Web前端 - ITeye博客
Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中. 在此之前，人们要想实现动态的网页应用，只能借助于第三方的 插件，比如Flash或Java，而引入了Canvas标记后，人们直接打通了通往神奇的动态应用网页的大门. 本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理.

html5 canvas 详细使用教程

- - CSDN博客Web前端推荐文章
图形变形（平移、旋转、缩放）. 矩阵变换（图形变形的机制）. 绘制图像（图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]）. 保存和恢复状态（context）. 结合setInterval制作动画.      是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验.

走进 HTML5：20个惊艳的 HTML5 Canvas 应用试验

- - 博客园_梦想天空
如今，HTML5 可谓如众星捧月一般，受到众多业内巨头的青睐. 很多 Web 开发者也尝试着用. HTML5 来制作各种 Web 应用. HTML5 规范引进了很多新特性，其中最令人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了通过. JavaScript 绘制图形的方法，非常强大.