Question

当我使用drawImage()后调用translate()时，如果两个调用都在绘图循环内，则drawImage()将其x，y坐标基于原始x，y坐标画布元素。但是，如果我在循环外连续执行它们，drawImage()将使其绘图位置偏离新的[0,0]坐标值。为什么会这样？我必须忽视一些事情。感谢您对此有所了解！

我的循环：

function draw() {
    setTimeout(function() {

        requestAnimationFrame(draw);
        context.clearRect(0, 0, myCanvas.width, myCanvas.height);
        context.translate(offsetX, offsetY);
        context.drawImage(bgImg, 0, 0);


    }, 1000 / fps);
};

draw();

手动调用：

document.getElementById("contextTranslate").onclick = function() { context.translate(offsetX, offsetY) };
document.getElementById("contextClear").onclick = function() { context.clearRect(0, 0, myCanvas.width, myCanvas.height) };
document.getElementById("contextDraw").onclick = function() { context.drawImage(bgImg, 0, 0) };

小提琴：http://jsfiddle.net/3Lrwbpb4/2/

Answer 1

您需要重置画布矩阵并清除上下文。

您可以在context.save()之前translate(..)和context.restore()之后执行此操作，以设置恢复上下文的状态。

function draw() {
    setTimeout(function() {

        requestAnimationFrame(draw);
        context.save();
        context.clearRect(0, 0, myCanvas.width, myCanvas.height);
        context.translate(offsetX, offsetY);
        context.drawImage(bgImg, 0, 0);
        context.restore();

    }, 1000 / fps);
};

draw();

或者通过设置画布的宽度/高度以简单易懂的方式进行。

所以只需更改此行

即可

context.clearRect(0, 0, myCanvas.width, myCanvas.height);

到

myCanvas.width = myCanvas.width;

两种方式都有效 - 请查看下面的代码段

var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");

var bgImg = new Image();
bgImg.src = "https://www.google.co.uk/images/srpr/logo11w.png";

var fps = 60;

var offsetX = 0;
var offsetY = 0;

// Manual invocation
document.addEventListener("keydown",
  function(e) {
    if (e.keyCode == 81) {
      offsetX++;
    } else if (e.keyCode == 65) {
      offsetY++;
    } else if (e.keyCode == 87) {
      offsetX--;
    } else if (e.keyCode == 83) {
      offsetY--;
    }
  }, false);

var useTricky = true;

// Drawing loop
function draw() {
  setTimeout(function() {

    requestAnimationFrame(draw);

    if (useTricky) {
      myCanvas.width = myCanvas.width;
    } else {
      context.save();
      context.clearRect(0, 0, myCanvas.width, myCanvas.height);
    }
    context.translate(offsetX, offsetY);
    context.drawImage(bgImg, 0, 0);
    if (!useTricky) {
      context.restore();
    }


  }, 1000 / fps);
};

draw();

<canvas id="myCanvas" width="426px" height="240px"></canvas>

<div id="tools">

  <button type="button" id="contextTranslate">Translate</button>
  <button type="button" id="contextClear">Clear</button>
  <button type="button" id="contextDraw">Draw</button>
  Keys Q and A increase X,Y offset value, W and S decrease them.

</div>

context.drawImage（）如何在调用context.translate（）之后记住原始的[0,0]画布坐标？

1 个答案: