Javascript 我可以将画布图像居中吗

我画了一个大的画布图像作为背景，图像比窗口大。我想知道是否有一种方法可以使图像居中以适应全屏显示。如果是，怎么做？这就是我正在做的：

        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';
        }        

---

下面是如何在画布上居中放置图像。任何垂直或水平溢出都将脱离画布：

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);
};

---

祝你的项目好运

这里有一种不使用变换将图像居中到画布的可选方法（另请参见下面的注释）：

因为图像比画布大，所以在这种情况下，x和y将是负片，这是非常好的。如果图像更小，它的效果也一样好。如果在加载处理程序之外进行绘图，则当然需要使用

imageObj

而不是

this

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

要使其正常工作，您可以执行以下操作：

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);
}        

---

这并不完美，因为调整大小事件队列仍然很大，并且可能会延迟-例如，也有解决方案（只需稍作修改）。

如果您在上传后添加图像，那么您可以使用它，它适用于我：） var image\u center\u width=（canvas.width-img.width）/2； var image\u center\u height=（canvas.height-img.height）/2

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);
}        

                        img.set({
                                left : image_center_width,
                                top : image_center_height,
                            });
                    canvas.add(img)