Javascript JQuery-在图像上绘制矩形

我试图在图像上画一个红色的矩形，但不知怎么的，我的矩形不是从我用鼠标点击的坐标开始的。代码如下：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let img = new Image();
let fileName = "";

let rect = {};
let drag = false;
  // Add image to canvas
reader.addEventListener(
    "load",
    () => {
      // Create image
      img = new Image();
      // Set image src
      img.src = reader.result;
      // On image load add to canvas
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        canvas.removeAttribute("data-caman-id");
      };
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);
    },
    false
  );
});


function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseUp() { drag = false; }

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.drawImage(img, 0, 0);
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.strokeStyle = 'red';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
        console.log("rect.startX: " + rect.startX + " - rect.startY: " +rect.startY)
    }
}

这是我得到的回报：

---

我无法在截图时显示我的鼠标位置，所以我在图像上标记了它。基本上，我从左上角开始画，矩形似乎从右下角开始画。我做错了什么？

好的，我的答案更多地与（原始）问题标题和一点jQuery乐趣有关

您的（原始）问题代码包括

canvas

和没有

jQuery

代码，只有javascript

这个答案更像是一种原始的

jQuery

方法

下面是一个非常粗略的概念，它使用

jQuery

mousedown
事件开始绘制矩形
调整大小
用于更新图像大小和偏移的事件
mousemove
用于更新矩形绘制位置的事件
mouseup
在设置位置设置矩形的事件

上述所有
.on
事件（不包括
调整大小
事件）都在文档选择器
区域中运行，该区域在下面的示例中有一个子
img
元素

请注意，我没有为
.area
div的多种用法编写这个示例，您需要更深入地使用我示例中的脚本逻辑来适应
.area
div的多种用法

下面我的脚本示例代码可能会激励您去想去的地方，但可能不会

我正在做的主要工作是将图像中的像素光标位置转换为百分比整数。使用百分比作为
xy
位置意味着如果相应地调整
窗口
或
区域
的大小（没有javascript），渲染结果将是相同的。

下面是一个
jQuery
和
CSS
有趣的例子

JSFIDLE版本：

请参阅代码中的注释以了解发生了什么


//要全局使用的可更新变量对象
设img={}；
设位置={}；
//用于更新img对象变量的图像矩阵函数
函数imgMatrix（）{
//我们的图像对象在区域内
设$img=$（'img'，'.area'）；
//图像偏移数据
let offset=$img.offset（）；
//添加/更新对象密钥数据
img.width=$img.outerWidth（）；
img.height=$img.outerHeight（）；
img.offsetX=offset.left-$（document）.scrollLeft（）；
img.offsetY=offset.top-$（document.scrollTop（）；
}
//用于更新位置对象变量的位置矩阵函数
函数位置矩阵（e，mousedown=false）{
//如果mousedown参数为true…用于
如果（鼠标向下）{
//使用百分比位置设置上/左位置对象数据
position.top=（100/img.height）*（（e.pageY-$（document.scrollTop（））-img.offsetY）；
position.left=（100/img.width）*（（e.pageX-$（document.scrollLeft（））-img.offsetX）；
}
//使用百分比位置设置右/底部位置对象数据
position.right=100-（（100/img.width）*（（e.pageX-$（document.scrollLeft（））-img.offsetX））；
position.bottom=100-（（100/img.height）*（（e.pageY-$（document.scrollTop（））-img.offsetY））；
}
//区域div中的鼠标移动事件函数
$（document）.on（'mousemove'，'.area'，函数（e）{
//在此mousemove事件中更新img对象变量数据
imgMatrix（）；
//如果这个区域有绘画课
if（$（this）.hasClass（'draw'））{
//通过当前事件数据更新位置对象变量数据
位置矩阵（e）；
//如果图像x光标拖动位置百分比为负值，则鼠标向下x位置
如果（（100-位置.底部）<位置.顶部）{
//更新矩形x负位置css
$（'.rect'，this）.css({
顶部：（100-位置.底部）+'%'，
底部：（100-位置.顶部）+'%
});
//否则，如果图像x光标拖动位置百分比为正，则鼠标向下x位置
}否则{
//更新矩形x正位置css
$（'.rect'，this）.css({
底部：position.bottom+'%'，
top:position.top+'%'，
});
}
//如果图像y光标拖动位置百分比为负值，则鼠标向下y位置
如果（（100-位置右侧）<位置左侧）{
//更新rectange y负位置css
$（'.rect'，this）.css({
左：（100-位置.右）+'%'，
右：（100-位置.左）+'%
});
//否则，如果图像y光标拖动位置百分比为正，则鼠标向下y位置
}否则{
//更新矩形y正位置css
$（'.rect'，this）.css({
右：位置。右+“%”，
左：位置。左+“%”
});
}
}
});
//区域div中的鼠标按下事件功能
$（文档）.on（'mousedown'，'.area'，函数（e）{
//删除绘制的类
$（this.removeClass（'Drawed'）；
//在此mousedown事件中更新img对象变量数据
imgMatrix（）；
//将传递当前事件数据和mousedown参数的位置对象变量数据更新为true
位置矩阵（e，真）；
//更新矩形xy位置css
$（'.rect'，this）.css({
左：位置。左+“%”，
top:position.top+'%'，
右：位置。右+“%”，
底部：position.bottom+“%”
});
//将绘图类添加到区域div以显示矩形
$（this.addClass（'draw'）；
});
//区域div中的鼠标向上事件功能
$（文档）.on（'mouseup'，'.area'，函数（e）{
//在此mouseup事件中更新img对象变量数据
imgMatrix（）；
//如果这个地区有绘画课
if（$（this）.hasClass（'draw'））{
//通过当前事件更新位置对象变量数据
位置矩阵（e）；
//如果x和y值相等，则在mouseup事件上基本上没有绘制矩形
如果（（数学特鲁克（位置左）==数学特鲁克（100-位置