javascript - 画布 - 刷新不像我预期的那样工作

Question

我正在学习如何在 JS 中创建游戏，我添加了背景、角色和动作。当我没有 ctx.clear(..) 时，角色正在移动但不清除上一个图像，当我有 ctx.clear 时，我看不到我的角色...

我尝试使用 setInterval 作为更新功能，但我的角色在闪烁，仍然没有创建更新/刷新的好选择

document.addEventListener('DOMContentLoaded', () => {
    window.requestAnimationFrame(update.bind(this));
    update();
    movingCharacter.moving(ctx);
});


function update() {
    let now
    let then = Date.now();
    let delta;

    now = Date.now();
    delta = now - then;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawFigure.draw(ctx, 0, 0, windowsWidth, windowsHeight,'#000000');
    drawImages.draw(ctx, imagesCharacterList.panda, pandaPosition[0], 
    pandaPosition[1], 50, 50);
    window.requestAnimationFrame(update.bind(this));
}



export default class DrawImages {
    draw(ctx, image, x, y, width, height) {
        const img = new Image();
        img.src = image;
        img.onload = () => {
            ctx.drawImage(img, x, y, width, height);
        }    
    }
}



export const pandaPosition = [100, 200];

export class MovingCharacter {
    moving(ctx) {
        document.addEventListener('keydown', (key) => {
            switch (true) {
                case key.keyCode === 87: 
                        pandaPosition[1] -= 1;
                    break;

                case key.keyCode === 83: 
                        pandaPosition[1] += 1;
                    break;

                case key.keyCode === 68: 
                        pandaPosition[0] += 1;
                    break;

                case key.keyCode === 65: 
                        pandaPosition[0] -= 1;
                    break;

                case key.keyCode === 32: 
                        pandaPosition[1] -= 10;
                            // ctx.clearRect(0, 0, window.innerWidth,                     window.innerHeight);

                    break;
            }    
        })
    }
}

我想移动我的角色并看到它......

标签： javascripthtmlcanvasecmascript-6html5-canvas

Answer 1

基本上，正如 Wiktor Zychla 所说，您不应该在每次绘制时都加载图像。

创建DrawImages类时加载图像，然后仅在更新循环中绘制图像。

class DrawImages {
    constructor(imageurl, ctx, x, y, width, height)
    {
       this.img = new Image();
       this.img.src = imageurl;
       this.img.onload = () => {
            ctx.drawImage(this.img, x, y, width, height);
       }    
    }
    draw(ctx, x, y, width, height) {
        ctx.drawImage(this.img, x, y, width, height);
    }
}

//I guess this goes in a different module
const drawImages = new DrawImages("https://example.com/image.jpg", ctx, pandaPosition[0], pandaPosition[1], 50, 50);

您可能想在 中做一些不同的事情onload，但这基本上是有效的。

var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
    window.requestAnimationFrame(update.bind(this));
    update();
    movingCharacter.moving();
});

function update() {
    let now
    let then = Date.now();
    let delta;

    now = Date.now();
    delta = now - then;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawImages.draw(ctx, pandaPosition[0], pandaPosition[1], 32, 32);
    window.requestAnimationFrame(update.bind(this));
}



class DrawImages {
    constructor(imageurl, ctx, x, y, width, height)
    {
       this.img = new Image();
       this.img.src = imageurl;
       this.img.onload = () => {
            ctx.drawImage(this.img, x, y, width, height);
       }    
    }
    draw(ctx, x, y, width, height) {
        ctx.drawImage(this.img, x, y, width, height);
    }
}

const pandaPosition = [100, 200];

const drawImages = new DrawImages("https://www.gravatar.com/avatar/0552c7e9c1da444137e8b235576e516d?s=64&d=identicon&r=PG", ctx, pandaPosition[0], pandaPosition[1], 32, 32);

class MovingCharacter {
    moving() {
        document.addEventListener('keydown', (key) => {
            switch (true) {
                case key.keyCode === 87: 
                        pandaPosition[1] -= 1;
                    break;

                case key.keyCode === 83: 
                        pandaPosition[1] += 1;
                    break;

                case key.keyCode === 68: 
                        pandaPosition[0] += 1;
                    break;

                case key.keyCode === 65: 
                        pandaPosition[0] -= 1;
                    break;

                case key.keyCode === 32: 
                        pandaPosition[1] -= 10;

                    break;
            }    
        })
    }
}

var movingCharacter = new MovingCharacter();

<canvas id="canv" width="300" height="300">