翻轉圖像和HTML5畫布中繪製的線條

Question

我正在使用畫布加載圖像。在圖像上繪製一些線條。然後，我想點擊一個「翻轉」按鈕來翻轉圖像和我剛畫出的線條。代碼是here on jsfiddle。

我現在的問題是：

1. 我繪製線條將不會翻轉，但圖像翻轉後，我 點擊「翻轉」按鈕。
2. 在我點擊「翻頁」按鈕後，線條將不會立即顯示「 」。當我開始再次繪製 時，線條會顯示。

任何幫助將不勝感激。

感謝，

var context; 
var canvas; 
var imageObj = new Image(); 
var flipH = true; 
var flipV = true; 
var scaleH = 1, 
    scaleV = 1; 
var posX = 0, 
    posY = 0; 
var isDrawingFreeDraw; 


    canvas = document.getElementById('myCanvas'); 
    context = canvas.getContext('2d'); 
    context.strokeStyle = "#FFFF00"; 
    //context.save(); 
    canvas.addEventListener('mousedown', MouseDown, true); 
    canvas.addEventListener('mouseup', MouseUp, true); 
    canvas.addEventListener('mousemove', MouseMove, true); 
    imageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/1/1a/Image_upload_test.jpg'; 


    imageObj.onload = function() { 
     context.drawImage(imageObj, posX, posY, canvas.height * imageObj.width/imageObj.height, canvas.height); 
    }; 


    console.log(context); 


$(document).on('click', '#FlipH', function() { 
    console.log("Flip Me"); 
    // context.restore(); 
    context.save(); 
    //canvas.width = 100; 
    scaleH = flipH ? -1 : 1; 
    context.scale(scaleH, scaleV); 
    posX = flipH ? (canvas.height * imageObj.width/imageObj.height) * -1 : 0; 
    context.drawImage(imageObj, posX, posY, canvas.height * imageObj.width/imageObj.height, canvas.height); 
    flipH = !flipH; 
    context.scale(1, 1); 
    //console.log(context); 

    context.restore(); 

}); 



function MouseUp(e) { 
    isDrawingFreeDraw = false; 
    context.save(); 

} 

function MouseDown(e) { 
    context.save(); 

    isDrawingFreeDraw = true; 
    console.log(e); 
    context.moveTo(e.pageX, e.pageY); 
    context.restore(); 

} 

function MouseMove(e) { 
    if (isDrawingFreeDraw) { 
     context.save(); 

     context.lineTo(e.pageX, e.pageY); 
     context.stroke(); 
     context.restore(); 

    } 
} 

Answer 1

要翻轉雙方的形象和你的圖紙，您可以使用畫布本身作爲一個的drawImage源。

// draw the canvas to itself 

ctx.drawImage(canvas,0,0); 

甲演示：http://jsfiddle.net/m1erickson/Y9SLQ/

示例代碼：

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 

var img=new Image(); 
img.onload=start; 
img.src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Image_upload_test.jpg"; 
function start(){ 

    canvas.width=img.width; 
    canvas.height=img.height; 

    ctx.drawImage(img,0,0); 

    ctx.beginPath(); 
    ctx.moveTo(50,50); 
    ctx.lineTo(50,300); 
    ctx.lineTo(250,300); 
    ctx.lineWidth=8; 
    ctx.stroke(); 

} 


$("#flipbutton").click(function(){ 
    ctx.save(); 
    ctx.translate(canvas.width,0); 
    ctx.scale(-1,1); 
    ctx.drawImage(canvas,0,0); 
    ctx.restore(); 
});