Question

我正在尝试构建一个鸟瞰游戏，其中玩家使用向上和向下箭头前后移动，左右箭头旋转页面以控制方向。这就是我所拥有的

var canvas = document.createElement('canvas');
document.getElementsByTagName('body')[0].appendChild(canvas);
canvas.width = 300;
canvas.height = 300;
var ctx = canvas1.getContext('2d');

function drawEnvironment(){
   //draw stuff
}
drawEnvironment();

var rotate = 0;
var top = 0;

document.onkeydown = function(e) {
    e.preventDefault;
    var code = e.which || e.keyCode;

    if (code == 39) {
        rotate -= 5;
    }
    if (code == 37) {
        rotate += 5;
    }
    if (code == 38) {
        top += 5;
    }   
    if (code == 40) {
        top -= 5;
    }

    ctx.clearRect(0, 0, 300, 300);
    ctx.save(); 
    ctx.translate(0,top);

    ctx.translate(150,150);
    ctx.rotate((Math.PI / 180) * rotate);
    ctx.translate(-150,-150);

    drawEnvironment();
    ctx.restore();
 }

问题在于，一旦角色移动，旋转不再围绕其中心，所以我在旋转时尝试计算TOP的值......

ctx.translate(0,top);
ctx.translate(150,150-top);
ctx.rotate((Math.PI / 180) * rotate);
ctx.translate(-150,-150+top);

修复了旋转原点问题，但现在向前/向后移动不再考虑旋转，因为翻译发生在旋转之后。

有什么想法解决这个问题的最佳方法？

如果我已经使用翻译，如何更改画布旋转原点？

0 个答案: