Question

我想在html5中绘制一个线元素

我想做的就像这样

mousedown事件将是我的起始位置（x，y）;

鼠标移动

当鼠标是mouseup然后它将是结束位置..

我已经完成了这部分

我真正想要的是看到画布中绘制的线条我正在移动鼠标当我已经取消鼠标时当鼠标移动并按下时，该线将在画布中精确绘制并按下

这是我的代码

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事件中画线时，线是'当光标移动到新位置时t被擦除。

我看到两种解决此问题的方法。

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

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

画一条直线元素html 5

1 个答案: