从特定原点缩放画布答案

【问题标题】：Scale canvas from a particular origin从特定原点缩放画布
【发布时间】：2016-01-05 05:19:10
【问题描述】：

我有一个带缩放功能的画布，但希望在更改缩放时能够将相机焦点保持在同一位置。

我已经使用 translate 来移动相机偏移量的画布内容，所以我如何还包括比例方面的原点有点令人困惑。

我的绘图代码如下所示：

function draw(){
    ctx.clearRect(0,0,el.width,el.height);

    ctx.save();

    ctx.translate(0-(camera.x - el.width/2),0-(camera.y-el.height/2));          
    ctx.scale(scale,scale);

     //draw stuff here

    ctx.restore();     
}

当前的翻译是为了确保相机（屏幕中间）指向正确的位置，但是一旦我缩放它，相机就不再聚焦在正确的位置。

我添加了一个 JSFiddle 来查看它的实际效果 http://jsfiddle.net/j2r1ysan/ 红点是相机的焦点，当你放大到足够远时，红点会聚焦在蓝色方块上，但实际上当比例默认时，这不是它所看到的。我该如何纠正这个问题？

【问题讨论】：

stackoverflow.com/questions/27339747/…
@markE 我已经解决了只需要更改一行代码的问题，您提供的链接似乎是一种非常简单的方法=/
很高兴你把它整理好了。 :-)

标签： javascript html math canvas

【解决方案1】：

我已经通过将数学逻辑更改为以下方式解决了这个问题：

function draw(){
    ctx.clearRect(0,0,el.width,el.height);

    ctx.save();

    ctx.translate(el.width/2,el.height/2);          
    ctx.translate(-camera.x*scale,-camera.y*scale); 
    ctx.scale(scale,scale); 
     //draw stuff here

    ctx.restore();     
}

演示：http://jsfiddle.net/5uhfg91e/

我希望这对以后的其他人有所帮助！

【讨论】：