Javascript 使用单击、鼠标移动和单击绘制矩形

我试图通过用户单击、鼠标移动和单击来绘制一个矩形。我的代码有两个问题

首先，在绘制一个矩形后，将自动假定将绘制另一个矩形。其次，第二个矩形的起点是创建第一个矩形的最后一次单击

---

以下是如何单击“移动”单击创建矩形的方法

创建以下变量：

var isDrawing=false;
var startX;
var startY;

var mouseIsDown=false;
var startX;
var startY;

在mousedown事件处理程序中：

• 如果这是开始单击，则设置isDrawing标志并设置startX/Y
• 如果这是结束单击，请清除isDrawing鞭毛并绘制矩形

您可能还希望更改鼠标光标，以便用户知道他们正在绘图

if(isDrawing){
    isDrawing=false;
    ctx.beginPath();
    ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
    ctx.fill();
    canvas.style.cursor="default";
}else{
    isDrawing=true;
    startX=mouseX;
    startY=mouseY;
    canvas.style.cursor="crosshair";
}

这是一把小提琴：

用拖动来创建一个矩形，而不是单击“移动”“单击”，怎么样？

创建以下变量：

var isDrawing=false;
var startX;
var startY;

var mouseIsDown=false;
var startX;
var startY;

在mousedown事件处理程序中，设置mouseIsDown标志并设置startX/Y

（可选）更改光标，以便用户知道他们正在拖动矩形

      mouseIsDown=true;
      startX=mouseX;
      startY=mouseY;
      canvas.style.cursor="crosshair";

在mouseup事件处理程序中，清除mouseIsDown标志并绘制rect

如果更改了光标，请将其重新更改

      mouseIsDown=false;
      ctx.beginPath();
      ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
      ctx.fill();
      canvas.style.cursor="default";

---

你很接近。所以，问题并不在于HTML5中的“canvas”元素，而是一个真正的div画布

为了让我看到你的代码试图完成什么，我必须整理它。需要做的是跟踪方形元素

每次单击画布时，我们都在做以下两件事之一。我们要么创建一个矩形元素，要么完成一个矩形元素。所以，当我们完成时，将'element'（以前名为'd'）设置为null是有意义的。在创建元素时，我们必须将新的DOM元素分配给“element”

每次鼠标移动时，我们都想知道鼠标的位置。如果元素正在创建过程中（或“NOTNULL”），那么我们需要调整元素的大小

然后我们将其全部封装在一个函数中，这就是它的全部内容：

function initDraw(canvas) {
    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var element = null;    
    canvas.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

    canvas.onclick = function (e) {
        if (element !== null) {
            element = null;
            canvas.style.cursor = "default";
            console.log("finsihed.");
        } else {
            console.log("begun.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            canvas.appendChild(element)
            canvas.style.cursor = "crosshair";
        }
    }
}

函数initDraw（画布）{
变量鼠标={
x:0,，
y:0，
startX:0，
startY:0
};
函数设置鼠标位置（e）{
var ev=e | | window.event；//Moz | | IE
如果（ev.pageX）{//Moz
mouse.x=ev.pageX+window.pageXOffset；
mouse.y=ev.pageY+window.pageYOffset；
}else如果（ev.clientX）{//IE
mouse.x=ev.clientX+document.body.scrollLeft；
mouse.y=ev.clientY+document.body.scrollTop；
}
};
var元素=null；
canvas.onmousemove=函数（e）{
设置鼠标位置（e）；
if（元素！==null）{
element.style.width=Math.abs（mouse.x-mouse.startX）+“px”；
element.style.height=Math.abs（mouse.y-mouse.startY）+'px'；
element.style.left=（mouse.x-mouse.startX<0）？mouse.x+'px'：mouse.startX+'px'；
element.style.top=（mouse.y-mouse.startY<0）？mouse.y+'px'：mouse.startY+'px'；
}
}
canvas.onclick=函数（e）{
if（元素！==null）{
元素=空；
canvas.style.cursor=“默认”；
console.log（“finsihed”）；
}否则{
console.log（“开始”）；
mouse.startX=mouse.x；
mouse.startY=mouse.y；
element=document.createElement（'div'）；
element.className='rectangle'
element.style.left=mouse.x+'px'；
element.style.top=mouse.y+'px'；
canvas.appendChild（元素）
canvas.style.cursor=“十字线”；
}
}
}

用法：传递要制作矩形画布的块级元素。 例如：

#帆布{
宽度：2000px；
高度：2000px；
边框：10px实心透明；
}
.矩形{
边框：1px实心#FF0000；
位置：绝对位置；
}
initDraw（document.getElementById（'canvas'）；

对于那些遇到滚动问题的人，我找到了一个解决方案。

---

您需要获取偏移量（使用window.pageYOffset）并在任何推荐的代码段中从鼠标位置将其减小。你也应该把它从高处取下来。

我也在做一个项目，下面是我的代码 享受

挑选
身体{
边际：0px；
背景色：#f1f1；
}
帆布{
边界：无；
}
//帆布
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//变数
var canvasx=$（canvas.offset（）.left；
var canvasy=$（canvas.offset（）.top；
var last_mousex=last_mousey=0；
var mousex=mousey=0；
var mousedown=false；
//穆斯敦
$（画布）.on（'mousedown'，函数（e）{
last_mousex=parseInt（e.clientX-canvasx）；
last_mousey=parseInt（例如clientY-canvasy）；
mousedown=true；
});
//鼠标
$（画布）.on（'mouseup'，函数（e）{
mousedown=false；
clearRect（0，0，canvas.width，canvas.height）；
});
//鼠标移动
$（画布）.on（'mousemove'，函数（e）{
mousex=parseInt（e.clientX-canvasx）；
mousey=parseInt（例如clientY-canvasy）；
如果（鼠标向下）{
ctx.clearRect（0,0，canvas.width，canvas.height）；//清除画布
ctx.beginPath（）；
变量宽度=mousex-last\u mousex；
变量高度=鼠标-最后一个鼠标；
ctx.rect（最后一个鼠标、最后一个鼠标、宽度、高度）；
//ctx.fillStyle=“#8ED6FF”；
ctx.fillStyle='rgba（164221249,0.3）'
ctx.fill（）；
ctx.strokeStyle='#1B9AFF'；
ctx.lineWidth=1；
ctx.fillRect（最后一个鼠标、最后一个鼠标、宽度、高度）
ctx.stroke（）；
}
//输出
$（'#output'）.html（'当前：'+mousex+'，'+mousey+'
最后：'+last\u mousex+'，'+last\u mousey+'
mous