如何通过 Javascript 使用鼠标事件在 canvas 上绘图

Question

我正在尝试创建一个 canvas 允许我使用鼠标事件在其上绘制矩形。与 windows 中选择的工作方式非常相似，我希望能够在我的页面上的任意位置单击，拖动 left/right/up/down，然后一旦我松开，就会绘制一个矩形，其起始坐标（x1 和y1) 在 mousedown 上，结束坐标 (x2, y2) 在 mouseup.

上

我一直在尝试创建 eventListeners 绑定到我的 canvas，return 分别在 mousedown 和 mouseup 上的起始和结束坐标，但我的变量保持未定义状态。

我的 canvas 跨越了我的 window 的整个长度，因此无需考虑相对定位。此外，解决方案必须仅使用 Javascript 来实现，不允许使用 JQuery。

感谢您的帮助！

Answer 1

更新

忽略下面的大部分内容，重新阅读你的问题，看来你已经掌握了理论。您的问题很可能是缺少 mousedown 和 mouseup 函数参数。尝试以下操作；

document.getElementsByTagName('canvas')[0].addEventListener('mousedown', function(e){
 // I THINK IT'S THE e ON THE LINE ABOVE THIS THAT YOU'RE MISSING.
 // YOU CAN THEN ACCESS THE POSITION OF THE MOUSE USING;

 mouse.x = e.pageX;
 mouse.Y = e.pageY;
})

我不会给你写代码，但我可以给你理论。

将您的鼠标 x 和 y 变量存储在一个对象中，例如 mouse = {}。

为 canvas 添加事件侦听器以获取鼠标按下（单击）并将 e.pageX 和 e.pageY 存储在 mouse.firstX 和 mouse.firstY 中。使用类似：

document.getElementsByTagName('canvas')[0].addEventListener('mousedown', function(e){ mouse.firstX = e.pageX; mouse.firstY = e.pageY; })

为 mouseup 的 canvas 创建第二个事件侦听器，并将这组 e.pageX 和 e.pageY 存储在 mouse.secondX 和 mouse.secondY 中。

计算 firstX 和 secondX、firstY 和 secondY 之间的差异，计算出你的矩形声音的大小。

var width = mouse.firstX + mouse.secondX // rect width

var height = mouse.firstY + mouse.secondY // rect height

然后，使用这些计算，使用 firstX 和 firstY 作为位置参数在 canvas 上绘制一个矩形。

希望以上内容比较清楚，对您有所帮助。如果没有，这可能会有所帮助；

http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

如何通过 Javascript 使用鼠标事件在 canvas 上绘图

How to draw on canvas using mouse events with Javascript

html

javascript

drawing

canvas

rectangles

更新

我不会给你写代码，但我可以给你理论。