HTML5 Canvas Scale position

Question

我第一次尝试使用canvas，并且有一些关于缩放的问题。

当我缩放画布（一半）我想设置当前位置。比例尺始终将画布设置为位置0,0（左上角）。

如果有人知道我可以在缩放时如何改变位置，请留下一个答案！

示例
http://i.stack.imgur.com/SLG4v.png原来。
http://i.imgur.com/2nmJZJH.png需要的结果。

Answer 1

获取您在图像中显示的内容。

// ctx is the canvas 2d context 
// img is the image 
function showImageScaled(img,scale,x,y){ 
    // scale is how big you want it. 
    // x and y are where in the image you want the top left to be 
    ctx.setTransform(scale,0,0,scale,0,0); 
    ctx.drawImage(img,-x,-y); // move the image 
} 

所以查看右上角放大2倍

showImageScaled(img,2,0,0); 

要显示在左上角的中心和图像缩放4倍

showImageScaled(img,4,img.width/2,img.height/2); 

希望这有助于。

Answer 2

由Blindman67

给出你可以使用这个精确数字变焦，它可以扩展您在自定义缩放中央点图像（相同的方式，LCD显示器如何数码相机变焦），并绘制它的解决方案的替代方案。

function precisionScale(img,scale,x,y){ 
     /** Function precisionScale 
     * The function scales the image with a custom central scaling point 
     * as opposed to 0,0 (top,left) default central scaling point 
     */ 
     ctx.translate(x,y); 
     ctx.scale(scale,scale); 
     ctx.drawImage(img,-x,-y); 
     ctx.scale(-scale,-scale); 
     ctx.translate(-x,-y); 
    }