Question

我希望能够点击并拖动以在javascript画布上绘制一个矩形。

我需要能够看到矩形，因为我正在拖动以改变大小，因为我正在像一条“橡皮筋”一样拖动，因为我听说它被称为。然后它在mouseup上创建。

我遇到了严重的困难，感谢任何帮助，谢谢！

Answer 1

要调查的算法是

使用动画帧回调清除并向画布写入新的矩形。（见requestAnimationFrame）
在画布上使用mousedown和mouseup事件来启动跟踪鼠标移动。 mousedown事件可以开始动画调用以绘制1x1像素矩形。
mousemove事件记录鼠标的位置以供动画帧绘制代码使用 - 如果没有待处理的回调，可以调用requestAnimationFrame。
如果您可以清除以前内容的画布以创建橡皮筋效果，那么鼠标上最后绘制的矩形就是结果。
如果需要保留现有内容，请调查在mousedown上制作画布的副本，并在绘制新矩形之前将其复制回画布。查看how to copy a canvas locally和/或how to (deep) clone a canvas

快乐的编码，需要学习很多东西！

Answer 2

首先，要在拖动（或鼠标移动）上绘制矩形，只需清除画布，然后绘制一个新的矩形。其次，画布形状不是对象，所以就我所知，你不能与它们交互，如果你想要交互性，可以考虑使用svg。这是一个拖延绘图的草率实现。

 $("canvas").mousedown(function(event){
     var ctx = this.getContext("2d");
     ctx.clearRect(0,0,$(this).width(),$(this).height());
     var initialX = event.clientX - this.getBoundingClientRect().left;
     var initialY = event.clientY - this.getBoundingClientRect().top;

     $(this).mousemove(function(evt) {
         ctx.strokeRect(initialX, initialY, evt.clientX - event.clientX, evt.clientY - event.clientY);
     });
 });

Javascript画布 - 绘制矩形拖放

2 个答案: