画布创建第二行

我可以创建可调整大小和可移动的线。但我不能创建第二行。我认为我必须在画布上保存对象并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

画布创建第二行

回答

相关问题