用画布中心缩小答案

【问题标题】：Center Zoom out with canvas用画布中心缩小
【发布时间】：2014-07-03 12:34:55
【问题描述】：

我正在实现图像的缩小效果。但是在缩放和缩小之后，图像不在画布的中心。

这是我的代码：

var canvas = document.getElementById('canvas');
var image = document.getElementById('image');
var ctx = canvas.getContext("2d");
var zoomDelta = 0.025; // 10 steps in 10s, scale from 5 to 1
var currentScale = 5;

var img = new Image();
img.src = image.src;
img.onload = function() {
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;
}

$("#start").on("click", function () {
    ctx.translate(canvas.width / 2, canvas.height / 2);
    drawImage();
    var zoom1 = window.setInterval(
        function() {
            if(currentScale < 1)
                window.clearInterval(zoom1);
            else                    
                reDraw();
        }, 50
    );
});

function reDraw() {
    currentScale -= zoomDelta;
    drawImage();
}

function drawImage() {
    clear();
    ctx.save();
    ctx.scale(currentScale, currentScale);
    ctx.drawImage(img, -img.width / 2, -img.width / 2);
    ctx.restore();
}

function clear() {
    ctx.clearRect(-img.width / 2 - 2, -img.width / 2 - 2, img.width + 4, img.height + 4);
}

提前致谢。

顺便说一句，这是它的小提琴：http://jsfiddle.net/huynq/RK2D7/

【问题讨论】：

这不是一个完整的答案，但出于这个原因我做了ZoomContext。它与常规的 2D 画布上下文相同，但它允许平移和缩放。

标签： javascript canvas

【解决方案1】：

平移到要使图像居中的点。

演示：http://jsfiddle.net/m1erickson/QEuw4/

var cx=canvas.width/2;
var cy=canvas.height/2;

ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(cx,cy);
ctx.scale(scale,scale);
ctx.drawImage(img,-img.width/2,-img.height/2);
ctx.restore();

【讨论】：