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