如何僅在畫布上移動一張圖像

我在HTML5中的畫布上繪製了大約10張圖像。然後，我想只移動第一張圖片，另一張應保留原位。這裏是代碼：如何僅在畫布上移動一張圖像

ctx.clearRect(0, 0, 500, 375); 
ctx.translate(20, 0);

我明白，我將整個畫布與代碼...但如何將只有一個圖像而不是整個畫布......我想用兩個帆布......但看起來像一個壞的解決方案給我！...

我客人的保存和恢復將被使用，但是當我嘗試，它重複的圖像...不好！我有點失落，並閱讀了很多教程，並閱讀：Canvas - move image-problem但不是有用的。 HELP

來源

2011-10-11 menardmam

編輯你的問題是錯誤的方式來表示你已經找到了答案，要麼刪除您的問題，要麼將其作爲答案並接受。 –

基於這個答案，我設法使它工作 http://stackoverflow.com/questions/7496674/how-to-rotate-one-image-in-a-canvas – menardmam

把它作爲*答案*。然後你可以接受它。 –

這是我最後的工作代碼

function drawOnCanvas() { 

    ctx.save(); 
    ctx.clearRect(0, 0, 500, 375); 

    ctx.globalAlpha = 1; 

    ctx.translate(image_objects[0].width/2, image_objects[0].height/2); 
    ctx.scale(scale,scale); 
    ctx.translate(-image_objects[0].width/2, -image_objects[0].height/2); 

    ctx.translate(image_objects[0].width/2, image_objects[0].height/2); 
    ctx.rotate(rotate); 
    ctx.translate(-image_objects[0].width/2, -image_objects[0].height/2); 

    ctx.translate(movex, movey); 
    ctx.drawImage(image_objects[0],0,0); 

    ctx.restore(); 

    if (hide_images == false) { 
     for (var i = 1; i < image_objects.length; ++i) { 
     ctx.globalAlpha = opacity; 
     ctx.drawImage(image_objects[i], 0, 0); 
     } 
    } 
}

來源

2011-10-15 01:03:08 menardmam

如何僅在畫布上移動一張圖像

回答

相關問題