當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

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

發布時間：2023/12/13 综合教程 37 生活家

生活随笔收集整理的這篇文章主要介紹了 HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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"></canvas>
        
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            window.onload = function () {
                var myCanvas = document.getElementById('myCanvas');
                
                var painting = myCanvas.getContext('2d');
                
                var num = 0;
                var speed = 0;
                setInterval(function(){
                    speed += 20;
                    if(speed > myCanvas.width){
                        speed = -150
                        //                speed = 0
                    };
                    
                    num++;
                    if(num > 8){
                        num = 1;
                    };
                    
                    painting.beginPath();
                    
                    //1.img對象
                    var imgNode = new Image();
                    
                    //2.img對象 設置 src
                    imgNode.src = 'img/q_r' + num + '.jpg';
                    
                    //3.等圖片加載完成后再去設置圖片顯示
                    imgNode.onload = function () {
                        //4.圖片顯示在畫布上
                        painting.clearRect(0, 0, myCanvas.width, myCanvas.height)
                        painting.drawImage(imgNode, speed, 150, 150, 90);
                    };
                }, 340);
            };
        </script>
    </body>
</html>

飛鳥案例（雙緩沖，解決跳幀閃爍問題）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>canvas 雙緩沖案例</title>

        <style type="text/css">
            body {
                width: 100%;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            .wrap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    
    <body>
        
        
        <div id="box" class="wrap">
        </div>
        
        
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            //                 創建 畫布的width  畫布的height  背景顏色 父元素
            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){
                var myCanvas = document.createElement("canvas");
                myCanvas.width = canvasWidth;
                myCanvas.height = canvasHeight;
                myCanvas.innerText = " 您的瀏覽器不支持 canvas，建議更新或者更換瀏覽器。";
                if(bgColor){
                    myCanvas.style.backgroundColor = bgColor;
                };
                if(parentObj){
                    parentObj.appendChild(myCanvas);
                };
                
                return myCanvas;
            };
            
            var box = document.getElementById("box");
            
            var topCanvas = createCanvasTo(600, 83, "#fff", box);
            movingPic(topCanvas, "./img/q_r", "jpg", -150, 0, 150, 83);
            
            var bottomCanvas = createCanvasTo(600, 300, "#fff", box);
            movingPic(bottomCanvas, "./img/walking", "png", -130, 27, 130, 246);
            
            
            //                 畫布對象 圖片路徑 圖片類型 起始x 起始y 圖片width 圖片height
            function movingPic(theCanvas, imgPath, imgType, posX, posY, imgWidth, imgHeight){
                var cacheCanvas = document.createElement("canvas");
                cacheCanvas.width = theCanvas.width;
                cacheCanvas.height = theCanvas.height;
                var cachePen = cacheCanvas.getContext("2d");
                
                var num = 1;
                var pos = 0;
                window.setInterval(function(){
                    pen = theCanvas.getContext("2d");    // 坑1: 一定要放在循環里面
                    pen.clearRect(0, 0, theCanvas.width, theCanvas.height);
                    
                    // 圖形位移變換
                    num++;
                    if(num > 8){
                        num = 1;
                    };
                    
                    pos += 15;
                    if(posX+pos > theCanvas.width){
                        pos = -130;
                    };
                    
                    // 雙緩沖繪制    先畫到臨時 canvas
                    cachePen.save();
                    cachePen.beginPath();
                    var imgObj = new Image();
                    imgObj.src = imgPath+num+"."+imgType;
                    imgObj.onload = function(){
                        cachePen.drawImage(imgObj, posX+pos, posY, imgWidth,imgHeight);
                    };
                    cachePen.restore();
                    
                    // 再轉到正式 canvas
                    pen.save();
                    pen.drawImage(cacheCanvas, 0, 0, cacheCanvas.width, cacheCanvas.height);
                    pen.restore();
                    
                    // 坑2: 一定要在 取走緩沖內容后 再清除緩沖
                    cachePen.clearRect(0, 0, cacheCanvas.width, cacheCanvas.height);
                }, 100);
            };
        </script>
    </body>
</html>

--------小尾巴
________一個人欣賞-最后一朵顏色的消逝-忠誠于我的是·一顆叫做野的心.決不受人奴役.怒火中生的那一刻·終將結束...

總結

以上是生活随笔為你收集整理的HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux 服务器程序规范、服务器日志、
下一篇：使用VMware Workstation