为什么可以't I翻译JS画布图像

Why Can't I Translate JS Canvas Image?

本文关键字：布图像 JS 图像 翻译 为什么      更新时间：2023-09-26

我知道你可以使用ctx.translate()翻译图像，但当我这样做时，它不起作用。我不知道怎么了。我花了整整两个小时试图弄清楚。这是我的代码：

<canvas id="tank_layer" height="1080" width="1920"></canvas>
var canvas = document.getElementById('tank_layer'),
    ctx = canvas.getContext('2d')
document.onkeydown=function(){
  ctx.translate(100,150)
}
img = new Image(1920, 1080),
img.src="../tanks/maps/2.png"
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

您需要在翻译后重新绘制图像，因此添加以下内容：

document.onkeydown=function(){ 
    ctx.translate(100,150) 
    ctx.drawImage(img,0,0)
}

想法

var counter=0;
document.onkeydown=function(){ 
    if (counter===0) {
        ctx.translate(100,150);
        ctx.drawImage(img,0,0);
        counter++;
    }
}
相关文章：