1

我正在尝试在画布中向下移动基本的侧滚动条，并且我对移动本身处于一个很好的位置，但我似乎无法让背景翻译。也许我误解了翻译的工作原理？主画布翻译得很好（“播放器”所在的那个），但 bg 画布不会让步。

http://jsfiddle.net/Y5SG8/1/

全屏：http: //jsfiddle.net/Y5SG8/1/embedded/result/

任何帮助将不胜感激。

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById('canvas'),
    bg = document.getElementById('canvas2'),
    ctx = canvas.getContext('2d'),
    bgctx = bg.getContext('2d'),
    width = 1280,
    height = 720,
    player = {
        x: width/2,
        y: height/2 - 15,
        width: 16,
        height: 24,
        speed: 3,
        velx: 0,
        vely: 0,
        jumping: false
    },

    keys = [],
    friction = 0.9,
    gravity = 0.3;

canvas.addEventListener('keydown', function(e) {keys[e.keyCode] = true;})
canvas.addEventListener('keyup', function(e) {keys[e.keyCode] = false;})

canvas.width = width;
canvas.height = height;
bg.width = width;
bg.height = height;

var bgimg = new Image();
    bgimg.src = 'bg.png';

bgimg.onload = function bgload() {bgctx.drawImage(bgimg,0,0);}

function playerupdate() {

    if (keys[68]) {
        if (player.velx < player.speed) {player.velx++;}
    }
    if (keys[65]) {
        if (player.velx > -player.speed) {player.velx--;}
    }

    player.velx *= friction;

    player.x += player.velx;
    ctx.translate(-player.velx,0);
    bgctx.translate(player.velx,0);


    ctx.clearRect(player.x, player.y, player.width, player.height);
    ctx.fillStyle = '#FF0000'
    ctx.fillRect(player.x, player.y, player.width, player.height);


    requestAnimationFrame(playerupdate);

    console.log(player.x)

}

window.onload = playerupdate();
4

2 回答 2

1

简短的回答，该translate函数会转换画布的上下文，但不会重绘，因此您需要：

// note you probably want the ctx to translate in the opposite direction of 
// the player's velocity if you want the appearance of movement (if that's 
// what you want)
bgctx.translate(-player.velx, 0);
bgctx.clearRect(0, 0, bg.width, bg.height);
bgctx.drawImage(bgimg, 0, 0);

知道了这一点，您可能可以从那里弄清楚。如果您的背景是非重复的（并且您阻止玩家从边缘移动），那么这可能是解决方案。

如果您的背景是可重复的，则您需要做更多的工作，因为翻译图像会很快将其移出屏幕。您可以通过绘制从图像创建的重复填充而不是在图像本身中绘制来解决此问题，例如：

// on image load, replacing your initial `drawImage`
bgimg.onload = function bgload() {
    var ptrn = bgctx.createPattern(bgimg, 'repeat');
    bgctx.fillStyle = ptrn;
    bgctx.fillRect(0, 0, bg.width, bg.height);                               
}

// then in the loop
bgctx.translate(-player.velx, 0);
// Here you'd fill a square *around* the player, instead of just
// repainting the image.
bgctx.fillRect(player.x - width/2, 0, bg.width, bg.height);
于 2013-10-23T15:15:48.387 回答
1

正如@numbers1311407 在他的回答中所说，您需要重新绘制图像。

但是这里严格来说不需要翻译 - 只需将图像重绘到新位置即可。

bgctx.drawImage(bgimg, -player.velx, 0);

修改过的小提琴

您甚至不需要使用 clear ，因为图像会透支任何东西 - 您唯一需要注意的是当图像超出“界限”时包装/平铺，否则您会撕裂（这适用于两种方法） .

于 2013-10-23T21:20:42.283 回答