在預設位置的html5畫布上縮放照片圖像

Question

我一直在努力解決這個問題，希望有人能夠幫助我解決這個問題。

我在我的html代碼中添加了畫布對象，我在其中加載了照片圖像。我試圖在一些隨機座標上縮放圖像，但縮放只發生在畫布中心。如果我使用翻譯，整個圖像隨着原點的變化而移動。我也嘗試過轉換，但是也沒有給出預期的結果。

Answer 1

使用context.drawImage（）+擴展參數縮放的原始圖像投影到畫布

context.drawImage(srcImage, srcX, srcY, srcWidth, srcHeight, 
     canvasX, canvasY, scaledWidth, scaledHeight) 

其中：

• srcImage =源圖像
• SRCX =在X - 您的源圖像上的圖像要開始抓取像素
• srcY =您想要的源圖像上的Y座標以開始從
• 斂像素要啓動從源圖像
• srcHeight斂=要啓動從源圖像
• canvasX斂像素的矩形的高度的像素的矩形的srcWidth =寬度 - 要開始畫你的像素矩形
• canvasY畫布上的X座標 - 要開始畫你的像素矩形
• scaledWidth在畫布上在Y座標 - 縮放源像素矩形這個寬度在畫到畫布之前
• scaledHeight - 縮放源像素矩形該高度畫到畫布

例如之前：

context.drawImage(myMap, 50,50,100,150, 20,20,200,300) 

這將抓住從MYMAP圖像對象的像素的100x150px矩形開始座標[50,50]。

然後它會將像素矩形縮放到200x300px。

最後，它將在畫布上的座標[20,20]處繪製放大的像素矩形