HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题

最新推荐文章于 2024-06-26 04:13:17 发布

aof26372

最新推荐文章于 2024-06-26 04:13:17 发布

阅读量2.3k

点赞数 3

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tianxiaxuange/p/9994104.html

版权

本文介绍了如何使用HTML5 Canvas处理图片加载，并通过双缓冲技术解决帧闪烁问题。首先创建Image对象加载图片，然后在图片加载完成后绘制到画布上。为了解决帧闪烁，提出在加载新帧前不清除旧帧，待新帧加载完毕再清空并绘制，从而避免空白延迟导致的闪烁。同时，提供了飞鸟案例展示双缓冲的实现方法。

摘要由CSDN通过智能技术生成

canvas 图片加载

pen.drawImage(ele, showX, showY, imgWidth, imgHeight);

ele 将 img 元素加载到画布上

步骤

1. 创建一个 <img> 对象

var imgNode = new Image();

imgNode.src = "./img/bird.png";

2. 等待图片加载完成，再进行下一步操作

imgNode.onload = function(){

3. 图片显示到画布上

pen.drawImage(imgNode, 0, 0, 100, 100);

};

跳帧闪烁问题

闪烁的原因：
- 清空了画布，然后加载图片，再等图片加载完，最后画下一帧。
- 这个空白延迟，主要是因为等待图片加载完成时间太久

解法1：

在加载图片之前，不清空上一帧图像
加载完成后，再清空画布，最后画下一帧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>帧闪烁解决</title>
        
        <style type="text/css">
            * {
        
                margin: 0;
                padding: 0;
            }
            
            body{
        
                text-align: center;
            }
            
            #myCanvas{
        
                border: 1px solid ;
            }
        </style>
    </head>
    
    <body>
        <canvas id="myCanvas" width="800" height="400"