我可以將畫布圖像居中嗎

Question

我正在繪制一個大的畫布圖像作為背景，該圖像大於窗口大小。 我想知道是否有辦法讓我將圖像居中放置在全屏上。 如果是這樣，怎么辦？ 這就是我在做什么：

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

Answer 1

這是不使用transform將圖像居中放置在畫布上的一種可選方式（另請參見下面的注釋）：

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 。

注意：設置大小調整處理程序的方法並不是處理圖像重新定位的最佳方法-您只應加載一次圖像，然后重用該對象。 由於調整大小通常會產生許多事件，因此它將觸發相等數量的圖像重新加載。

為了使其正常工作，您可以改為執行以下操作：

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事件隊列仍然很大並且可能會滯后，因此它不是完美的-對此也有解決方案，例如， 這個 （稍作修改）。

Answer 2

這是將圖像在畫布上居中的方法。 任何垂直或水平溢出都將超出畫布：

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

祝您項目順利！

Answer 3

如果要在上傳后添加圖像，則可以使用它，它對我有用：) var image_center_width =（canvas.width-img.width）/ 2; var image_center_height =（canvas.height-img.height）/ 2;

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