-1

我想在 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);
4

1 回答 1

4

我猜您的意图是用户实时看到一条“预览”线，该线在用户移动光标时移动，而您的问题是当您在 mousemove 事件期间绘制线时，该线不会被擦除光标移动到一个新位置。

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

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

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

于 2013-01-07T09:21:26.940 回答