Javascript 如何像画画一样在画布上画矩形？_Javascript_Html5 Canvas_Mouseevent

Javascript 如何像画画一样在画布上画矩形？

javascript html5-canvas

Javascript 如何像画画一样在画布上画矩形？,javascript,html5-canvas,mouseevent,Javascript,Html5 Canvas,Mouseevent,假设我想在画布上画一个矩形。我希望能够从用户的鼠标中获得坐标。理想的情况是用户点击某一点，然后向下拖动到另一端，就像我们使用paint绘制的矩形一样。我怎样才能像画画一样通过拖动鼠标画出一个矩形？（当他点击鼠标离开时，如何获得鼠标的坐标？看到这一点，将鼠标移到正方形上，见证Process.js的神奇使用此功能，您可以获取鼠标坐标 function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect()

假设我想在画布上画一个矩形。我希望能够从用户的鼠标中获得坐标。理想的情况是用户点击某一点，然后向下拖动到另一端，就像我们使用paint绘制的矩形一样。我怎样才能像画画一样通过拖动鼠标画出一个矩形？（当他点击鼠标离开时，如何获得鼠标的坐标？

看到这一点，将鼠标移到正方形上，见证Process.js的神奇

使用此功能，您可以获取鼠标坐标

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }

此函数接收画布对象和事件。现在，您只需在mousedown和mouseup上添加一个eventHandler，就可以获得这两个位置

var canvas = document.getElementById('canvasId');
var ctx = canvas.getContext('2d');

var locA, locB;

document.addEventListener('mousedown', function(e) {
     e.preventDefault();
     locA = getMousePos(canvas, e);
});

document.addEventListener('mouseup', function(e) {
     e.preventDefault();
     locB = getMousePos(canvas, e);

     ctx.fillStyle = '#000000';
     ctx.fillRect(locA.x, locA.y, (locB.x - locA.x), (locB.y - locA.y));
});

功能来源：

画布坐标与文档坐标之间仍然存在一些问题，但我相信您能够解决这些问题。

以下是如何在画布上拖动绘制矩形的概述：

在mousedown：

保存鼠标的起始位置
设置指示拖动已开始的标志

在mousemove中：

清除上一个矩形的画布
根据开始与当前鼠标位置计算矩形的宽度/高度
从起始XY到当前鼠标位置绘制一个矩形

在mouseup中：

清除拖动标志，因为拖动已结束

下面是示例代码和演示：


正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
//获取对画布和上下文的引用
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//为上下文设置样式
ctx.strokeStyle=“蓝色”；
ctx.线宽=3；
//计算画布在窗口上的位置
//（用于帮助计算mouseX/mouseY）
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var scrollX=$canvas.scrollLeft（）；
var scrollY=$canvas.scrollTop（）；
//当用户拖动鼠标时，此鞭毛为真
var isDown=假；
//这些变量将保持鼠标的起始位置
var-startX；
var startY；
功能手柄向下（e）{
e、 预防默认值（）；
e、 停止传播（）；
//保存矩形的起始x/y
startX=parseInt（e.clientX-offsetX）；
startY=parseInt（e.clientY-offsetY）；
//设置指示拖动已开始的标志
isDown=真；
}
功能handleMouseUp（e）{
e、 预防默认值（）；
e、 停止传播（）；
//拖动结束，清除拖动标志
isDown=假；
}
函数handleMouseOut（e）{
e、 预防默认值（）；
e、 停止传播（）；
//拖动结束，清除拖动标志
isDown=假；
}
功能手柄移动（e）{
e、 预防默认值（）；
e、 停止传播（）；
//如果我们不拖拉，就回来
如果（！isDown）{return；}
//获取当前鼠标位置
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//把你的mousemove放在这里
//清理画布
clearRect（0,0，canvas.width，canvas.height）；
//计算矩形的宽度/高度
//启动时与当前鼠标位置的比较
var宽度=mouseX startX；
var高度=老鼠星；
//从起始位置绘制一个新的矩形
//移动到当前鼠标位置
ctx.strokeRect（星形、星形、宽度、高度）；
}
//侦听鼠标事件
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseOut（e）；}）；
}); // end$（函数（）{}）；
拖动鼠标以创建矩形

清除

“未捕获类型错误：无法读取未定义的属性“left”。这是它显示的错误。实际上，我正在尝试绘制的画布在一个iframe中，所以我猜我们需要访问另一个DOM中的canvas元素的id。请根据它更改您的代码并重新发布。感谢您的帮助。您需要为我发布您的html，以便从；-）获取参考资料

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // get references to the canvas and context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // style the context
    ctx.strokeStyle = "blue";
    ctx.lineWidth=3;

    // calculate where the canvas is on the window
    // (used to help calculate mouseX/mouseY)
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // this flage is true when the user is dragging the mouse
    var isDown=false;

    // these vars will hold the starting mouse position
    var startX;
    var startY;


    function handleMouseDown(e){
      e.preventDefault();
      e.stopPropagation();

      // save the starting x/y of the rectangle
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // set a flag indicating the drag has begun
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      e.stopPropagation();

      // the drag is over, clear the dragging flag
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      e.stopPropagation();

      // the drag is over, clear the dragging flag
      isDown=false;
    }

    function handleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();

      // if we're not dragging, just return
      if(!isDown){return;}

      // get the current mouse position
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here

      // clear the canvas
      ctx.clearRect(0,0,canvas.width,canvas.height);

      // calculate the rectangle width/height based
      // on starting vs current mouse position
      var width=mouseX-startX;
      var height=mouseY-startY;

      // draw a new rect from the start position 
      // to the current mouse position
      ctx.strokeRect(startX,startY,width,height);

    }

    // listen for mouse events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Drag the mouse to create a rectangle</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>