【问题标题】：How to draw on canvas using mouse events with Javascript如何使用带有 Javascript 的鼠标事件在画布上绘图
【发布时间】：2016-02-11 16:52:32
【问题描述】：

我正在尝试创建一个允许我使用鼠标事件在其上绘制矩形的画布。与 Windows 中的选择方式非常相似，我希望能够在页面上的任意位置向下单击，向左/向右/向上/向下拖动，然后一旦我释放，就会使用起始坐标（x1 和 y1）绘制一个矩形mousedown 和 mouseup 上的结束坐标 (x2, y2)。

我一直在尝试创建绑定到我的画布的 eventListeners，它分别返回 mousedown 和 mouseup 上的开始和结束坐标，但我的变量仍未定义。

我的画布横跨整个窗口长度，因此无需考虑相对定位。此外，该解决方案必须使用纯 Javascript 来实现，不允许使用 JQuery。

感谢您的帮助！

【问题讨论】：

标签： javascript html canvas drawing rectangles

【解决方案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 = {} 等对象中。

为鼠标按下（单击）添加一个事件监听器并将 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 的画布创建第二个事件侦听器，并将这组 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 作为位置参数在画布上绘制一个矩形。

我希望这相对清晰并且对您有所帮助。如果没有，这可能会有所帮助；

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

【讨论】：