画一条直线元素HTML 5

Question

我想在HTML5绘制线条元素

我想做的事就是这样

mousedown事件将是我的出发位置（X，Y）;

鼠标移动

当鼠标是鼠标松开那么这将是结束位置..

我已经做了这部分

我想真的是什么，就是看在画布 而绘制的线我正在移动鼠标 当我已经解压缩鼠标 该线将完全绘制在画布上，因为它在鼠标移动并按下时被预览

这里是我的代码

canvas_draw.addEventListener('mousemove',function(e){ 
x=e.pageX-canvas_draw.offsetLeft; 
y=e.pageY-canvas_draw.offsetTop; 
},false); 

canvas_draw.addEventListener('mousedown',function(e){ 
context_draw.beginPath(); 
context_draw.moveTo(x,y); 
},false); 

canvas_draw.addEventListener('mouseup',function(e){ 
context_draw.lineTo(x,y); 
context_draw.stroke(); 
context_draw.closePath(); 

},false); 

Answer 1

我猜你的意图是用户可以看到实时“预览”线，同时进行移动用户移动光标，你的问题是，当你划清界线在mousemove事件期间，当光标移动到新位置时，行不会被删除。

我看到两种方法来解决这个问题。

a）在mousedown事件中创建画布的备份副本，方法是将其绘制到drawImage()的新不可见画布上。在mousemove中绘制线条之前，将备份副本绘制回实际画布以擦除您在前一个mousemove事件中绘制的线条（您可以通过仅复制前一行覆盖的部分来提高性能）。

b）在真实画布上创建一个新的透明画布，并将其用于任何用户界面元素（如预览线）。这样，你可以随意擦除它，而不会损坏它下面的真实画布（请记住，大多数事件将被顶部画布捕捉）。