我可以居中画布图像

我正在绘制一个大型的画布图像作为背景，图像大于窗口大小。我想知道是否有一种方法可以让我将图像集中在全屏幕上。如果是这样，怎么样？这是我在做什么：我可以居中画布图像

 var canvas = document.getElementById('canvas'), 
      context = canvas.getContext('2d'); 

     window.addEventListener('resize', resizeCanvas, false); 

     function resizeCanvas() { 
      canvas.width = window.innerWidth; 
      canvas.height = window.innerHeight; 

      drawStuff(); 
     } 

     resizeCanvas(); 

     function drawStuff() { 
      var imageObj = new Image(); 

      imageObj.onload = function() { 
       context.drawImage(imageObj, 69, 50); 
      }; 

      imageObj.src = '/resources/img/bg.png'; 
     }

来源

2014-10-20 Louis

这里是定心的图像不使用变换以帆布的可选方式（也参见下面的注释）：

imageObj.onload = function() { 

    var x = (canvas.width - this.width) * 0.5, // this = image loaded 
     y = (canvas.height - this.height) * 0.5; 

    ctx.drawImage(this, x, y); 
};

由于图像比画布x和y较大将是负的在这种情况下，这非常好。如果图像较小，它也可以工作。如果您在负载处理程序外执行绘图，则当然需要使用imageObj而不是this。

注意：您设置resize处理程序的方式不是处理图像重新定位的最佳方式 - 您应该只加载一次图像，然后重新使用该对象。由于调整大小通常会创建大量事件，因此会触发相同数量的图像重新加载。

为此才能正常工作，你可以做这样的事情，而不是：

var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'), 

    imageObj = new Image(); // declare globally 

imageObj.onload = function() { 

    // now set up handler when image is actually loaded 
    // - else drawImage will fail (width, height is not available and no data) 
    window.addEventListener('resize', resizeCanvas, false); 

    // initial call to draw image first time 
    resizeCanvas(); 
}; 

imageObj.src = '/resources/img/bg.png'; 

function resizeCanvas() { 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 

    drawStuff(); 
} 

function drawStuff() { 
    var x = (canvas.width - imageObj.width) * 0.5, 
     y = (canvas.height - imageObj.height) * 0.5; 

    ctx.drawImage(imageObj, x, y); 
}

它不是完美的，因为resize事件队列仍然会很大，可能会滞后 - 这是你的解决方案也是如此，例如this one （稍作修改）。

来源

2014-10-20 05:47:25 K3N

thx！ - 这有助于很多* – Louis 2014-10-20 19:32:27

以下是如何将图像居中在画布上。任何垂直或水平溢出将是非画布的：

imageObj.onload = function() { 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.drawImage(imageObj,-imageObj.width/2,-imageObj.height/2); 
    ctx.translate(-canvas.width/2,-canvas.height/2); 
};

祝您的项目顺利！

来源

2014-10-20 04:55:38 markE

我可以居中画布图像

回答

相关问题