Javascript 鼠标下移事件绘制直线的问题

请看一下下面的演示，让我知道如何让代码在画布上画100%的直线

$（函数（）{
var drawLine=假；
var theCanvas=document.getElementById（'map'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=420；
canvas.height=300；
var canvasOffset=$（'#map'）.offset（）；
$（'#map'）.mousemove（函数（e）{
如果（绘制线===真）{
ctx.lineTo（e.pageX-canvasOffset.left，e.pageY-canvasOffset.top）；
ctx.stroke（）；
}
});
$（'#map'）.mousedown（函数（）{
抽绳=真；
ctx.strokeStyle='蓝色'；
ctx.lineWidth=5；
ctx.lineCap='圆形'；
ctx.beginPath（）；
ctx.moveTo（e.pageX-canvasOffset.left，e.pageY-canvasOffset.top）；
});
$（窗口）.mouseup（函数（）{
抽绳=假；
});
});
#映射{边框：实心；边距顶部：50px；}
您需要两张画布：

临时动画
永久保存图纸
算法：

ondown写入开始坐标
在移动记录端点时，清除画布1，在画布1上从起点到终点画一条线
onup在第二张画布上画最后一条线，清除第一张画布
太懒了，创建第二个画布（现在每次尝试都会清除）；
将注释放在通过不同画布进行永久绘制的位置


$（函数（）{
var drawLine=假；
var theCanvas=document.getElementById（'map'）；
var finalPos={x:0，y:0}；
var startPos={x:0，y:0}；
var ctx=canvas.getContext（'2d'）；
canvas.width=420；
canvas.height=300；
var canvasOffset=$（'#map'）.offset（）；
功能线（cnvs）{
cnvs.beginPath（）；
cnvs.moveTo（startPos.x，startPos.y）；
cnvs.lineTo（finalPos.x，finalPos.y）；
cnvs.stroke（）；
}
函数clearCanvas（）
{
ctx.clearRect（0，0，扫描宽度，扫描高度）；
}
$（'#map'）.mousemove（函数（e）{
如果（绘制线===真）{
finalPos={x:e.pageX-canvasOffset.left，y:e.pageY-canvasOffset.top}；
clearCanvas（）；
线路（ctx）；
}
});
$（'#map'）.mousedown（函数（e）{
抽绳=真；
ctx.strokeStyle='蓝色'；
ctx.lineWidth=5；
ctx.lineCap='圆形'；
ctx.beginPath（）；
startPos={x:e.pageX-canvasOffset.left，y:e.pageY-canvasOffset.top}；
});
$（窗口）.mouseup（函数（）{
clearCanvas（）；
//替换为作为第二个画布的var
线路（ctx）；
finalPos={x:0，y:0}；
startPos={x:0，y:0}；
抽绳=假；
});
});
#映射{边框：实心；边距顶部：50px；}

谢谢，但这不是我想要的，你能看看这个样本吗
http://jsfiddle.net/URWru/
我想创建如下内容this@Suffii固定的。代码您需要两个画布才能完全复制您的示例，我太懒了：）Upvote，如果您存储前面的行并重新绘制它们，您的答案将是完整的。@markE同意，尽管每次重新绘制许多行会随着行数的增加而变慢，所以两个画布的效果会更好（更快）。但作为一个演示，它会起作用。@E_p根据我的经验，即使是数百条重新绘制的线条也不会明显减慢绘图速度。同意…使用包含前几行的第二个画布会更快，但代价是第二个画布使用了一些内存。干杯顺便说一句，这里有一个使用2张画布的示例：将鼠标完全直线移动。。如果E_p的答案不正确，我不确定我是否知道你在寻找什么。你能编辑你的问题以提供更多信息吗？@mambrow，我想要的是类似于这条绘制直线的示例，为什么你认为这不清楚？使用E_p的答案，但也保存前面所有行的起点+终点。除了每次清除画布外，还需要重新绘制前面的所有行。；-）