canvas鼠标拖动在上面画矩形框的问题

我想让鼠标拖动实时显示矩形框的大小变化,利用onmousedown、onmousemove、onmouseup这三个事件来做。

请问在onmousemove里怎么处理才不会出现鼠标在拖动的时候把上一次矩形框也显示出来
document.onmousemove=function(e) {

ctx.strokeRect(参数...);

}
如果是这么写的话,鼠标一拖动就会显示很多框框。要是是用清除功能的话,就会把之前画好的也给清除掉了

阅读 7.6k
2 个回答

目前我想到了两种方法:

  1. 对于之前绘制好的图像,进行坐标的存储。每次绘制之前,将画板清空,绘制出存储的图形坐标。
  2. 可以将两个 canvas 图层叠加,(姑且称为显示层,临时层)。mousedown,mouseup,mousemove 都由临时层监听。其中 mousedown,mouseup 监听的时候对显示层也进行绘制,每次只清除临时层。记得把临时层放到显示层的上面。

两个画布就是楼上说的.
一个画布,你就把鼠标抬起时那个好好的存到一个数组里,每次鼠标事件之前把那个数组里的遍历画一次.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题