我試圖縮放，旋轉和翻譯用戶定義的畫布圖像

Question

是否可以將函數指定爲畫布元素的值？這是我目前的實施（非工作）。

function recImagePressed(e){ 
    var outputCanvas = document.getElementById("outputCanvas"); 
    outputCanvas.value = draw();//-----this is my concern. 

    function draw() { 
    img = new Image(); 
    img.src = canvas2.getContext(); 
    fr1 = makeFrame(context2, makeVect(100,100), makeVect(200, 50), makeVect(50, 200)); 
    img.onload = function(){ 
      var newPainter = imagePainter(fr1); 
      context2.save(); 
    } 
} 

Answer 1

那麼，你不能這樣做，因爲你這樣做。你也做不到：

img = new Image(); 
img.src = canvas2.getContext(); 

這是行不通的。但你並不需要這麼做，因爲你可以得出一個帆布到另一個drawImage(canvas, x, y)

您需要類似於：

var outputCanvas = document.getElementById("outputCanvas"); 
outputCtx = outputCanvas.getContext('2d'); 
outputCtx.scale(x,y); 
outputCtx.rotate(radians); 
outputCtx.drawImage(canvas2, 0, 0); 

根據您想如何旋轉，縮放該是圖像在canvas2上繪製到outputCanvas之前