Question

我试图在画布上放置图像，以便可以在用JS开发的小游戏中使用它来练习函数式编程。

我搜索了一些关于Promise和函数式编程的教程，但尚未找到解决方案。

这是我的代码：

function loadImage(url) {

    return new Promise(resolve => {
        const image = new Image();
        image.addEventListener('load', () => {
            resolve(image);
        });
        image.src = url;
    });
}

const canvas = document.getElementById('bitchinBlock')
const context= canvas.getContext('2d');

context.scale(20, 20);

loadImage('media/images/ball.png')
    .then(image => {
    context.drawImage(image, 100, 100);
    });

const cube = [
    [1, 1],
    [1, 1]
];

function collide(arena, player) {

    const [c, o] = [player.cube, player.pos];
    for (let y = 0; y < c.length; ++y) {
        for (let x=0; x < c[y].length; ++x) {
            if (c[y][x] !== 0 &&
               (arena [y + o.y] &&
               arena[y + o.y][x + o.x]) !== 0) {
                   console.log(true);
                   return true;
            }
        }
    }

    return false;
}

function createMatrix(w, h) {
    const matrix = [];
    while (h--) {
        matrix.push(new Array(w).fill(0));   
    }
    return matrix;
}

function merge(arena, player) {

    player.cube.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                arena[y + player.pos.y][x + player.pos.x] = value;
            }
        });
    });
}


function draw() {
    context.fillStyle = '#0b033f';
    context.fillRect(0, 0, canvas.width, canvas.height);

    drawCube(player.cube, player.pos);



}


function drawCube(cube, offset){

    cube.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                context.fillStyle = '#ff3dff';
                context.fillRect( x + offset.x,
                                  y + offset.y,
                                  1, 1);                
            }
        });
    });
}




function update() {
    draw();
    requestAnimationFrame(update);
}

const arena = createMatrix(25, 20); 

const player = {
    pos: {x: 0, y: 0},
    cube: cube
}

function playerMoveX(offset) {
    player.pos.x += offset;
    if (collide(arena, player)) {
        console.log('boom');
        player.pos.x -= offset;
    }
}

function playerMoveY(offset) {
    player.pos.y += offset;
    if (collide(arena, player)) {
        console.log('bemmm');
        player.pos.y -= offset;
    }
}

document.addEventListener('keydown', event => {
    if (event.keyCode === 37) {
        playerMoveX(-1)
        console.log('pressed left. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    } else if (event.keyCode === 39) {
        playerMoveX(1)
        console.log('pressed right. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    } else if (event.keyCode === 38) {
        playerMoveY(-1)
        console.log('pressed up. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    } else if (event.keyCode === 40) {
        playerMoveY(1)
        console.log('pressed down. X: ' + player.pos.x + ' Y: ' + player.pos.y);
    }
})

update();

我遇到以下问题：

function loadImage(url) {

    return new Promise(resolve => {
        const image = new Image();
        image.addEventListener('load', () => {
            resolve(image);
        });
        image.src = url;
    });
}

和：

loadImage('media/images/ball.png')
    .then(image => {
    context.drawImage(image, 100, 100);
    });

也许是我的函数放置的顺序？我不知道。

我希望它在画布上显示我的图像，其余的我将尝试弄清楚自己，我现在正坐在一堵墙上。

感谢您抽出宝贵时间阅读我的问题。如果您很忙，请不要回答。

Answer 1

当我使用jsfiddle检查您的代码时。我发现您提到的功能没有错。下面是我尝试的代码。

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext("2d")
//ctx.fillRect( 10, 10, 10, 10 )

function loadImage( url ) {
	let image = new Image()
  image.setAttribute( 'crossOrigin', 'Anonymous' )
  image.src = url
  return new Promise( ( resolve, reject ) => {
  	image.addEventListener('load', function() {
    	resolve( this )
    } )
  } )
}

loadImage( 'http://i.imgur.com/3tU4Vig.jpg' )
  .then( function( image ) {
  	ctx.drawImage( image, 0, 0 )
  } )

<canvas></canvas>

我认为问题在于画布的尺寸太小。因此，当您在画布中渲染图像时。图片在画布外部渲染，因此您看不到其中的任何图像。

Answer 2

对我来说，这很好。请检查一下。

https://codepen.io/samma89/pen/MRyGZM

也许你错过了这个。

<canvas id="bitchinBlock"></canvas>

如何修复未显示在画布中的图像

2 个答案: