畫布創建第二行

我可以創建可調整大小和可移動的線。但我不能創建第二行。我認爲我必須在畫布上保存對象並drawImage drawagain，但我做不到。我也使用unbind要停止繪製畫布創建第二行

var canvas = document.getElementById('canvas'), 
    c = canvas.getContext('2d'), 
    mouseX = 0, 
    mouseY = 0, 
    width = 700, 
    height = 700, 
    distx = 0, 
    disty = 0, 
    hw = 10, 
    hh = 10; 


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

function draw(x,y) { 


    distx = mouseX - hw; 
    disty = mouseY - hh; 

    c.clearRect(0, 0, width, height); 
    // set the colour 
    c.save(); 
    c.translate(hw, hh); 
    c.beginPath() 
    c.strokeStyle = '#fff'; 
    c.moveTo(x, y); 
    c.lineTo(distx, disty); 
    c.closePath(); 
    c.stroke(); 

    c.closePath(); 
    c.restore();   
    c.save(); 



} 
var abc = true; 
//all browsers 

var click =  $("canvas").bind('click',function(eb){ 
    if(eb.offsetX){ 
    mX = eb.offsetX; 
    mY = eb.offsetY; 
    } else { 
    mX = eb.pageX; 
    mY = eb.pageY; 
    } 
var mousemove = $("canvas").bind('mousemove',function(e){ 
    if(e.offsetX){ 
    mouseX = e.offsetX; 
    mouseY = e.offsetY; 
    } else { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    } 
draw(mX,mY); 
}); 
}); 
$("canvas").dblclick(function(){ 
$("canvas").unbind("mouseenter"); 
$("canvas").unbind("mousemove"); 
});

我應該怎麼做，以創建第二行

來源

2011-09-08 Cenk

如果解決方案使用兩個帆布什麼關係呢？ –

不，我現在看，但如果你可以給一些答案，它變得非常好。並感謝 – Cenk

這裏的主要問題是：

爲了使顯示刷新，您每次刷新時都調用clearRect，並清除以前的繪圖。

解決該問題的方法之一是使用兩個畫布，一個在另一個之上。你用其中的一個來跟蹤未來的抽籤（所以你不需要清楚這一點，只有當前的線）。另一個用於在用戶創建時繪製每一行。這個永遠不會被清除。

作爲一個例子可能是一個更好的方式來了解，你可以看到的是，這裏的例子：http://jsfiddle.net/dTs4h/1/

來源

2011-09-08 12:54:29

畫布創建第二行

回答

相關問題