Javascript 使用拖动事件在画布上的图像上绘制矩形区域_Javascript_Jquery_Html_Canvas

Javascript 使用拖动事件在画布上的图像上绘制矩形区域

javascript jquery html canvas

Javascript 使用拖动事件在画布上的图像上绘制矩形区域,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我试图用鼠标在图像上画一个矩形，并在HTML5上拖动事件。我的代码如下所示。当我画下面的矩形时，画布上的实际图像消失了。你能告诉我我做错了什么吗？我的目标是将矩形放在图像的顶部。我附上了一张我真正想看到的最终结果的照片我做错了什么身体{ 边际：0px；填充：0px； } var canvas=document.getElementById（'myCanvas'）； var ctx=canvas.getContext（'2d'）； var imageObj=新图像（）； imageOb

我试图用鼠标在图像上画一个矩形，并在HTML5上拖动事件。我的代码如下所示。当我画下面的矩形时，画布上的实际图像消失了。你能告诉我我做错了什么吗？我的目标是将矩形放在图像的顶部。我附上了一张我真正想看到的最终结果的照片

我做错了什么


身体{
边际：0px；
填充：0px；
}
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
ctx.drawImage（imageObj，69,50）；
};
imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
//ctx.globalAlpha=0.5；
rect={}，
阻力=假；
var rectStartXArray=新数组（）；
var rectStartYArray=新数组（）；
var rectWArray=新数组（）；
var rectHArray=新数组（）；
函数init（）{
canvas.addEventListener（'mousedown'，mousedown，false）；
canvas.addEventListener（'mouseup'，mouseup，false）；
canvas.addEventListener（'mousemove'，mousemove，false）；
}
功能鼠标向下（e）{
rect.startX=e.pageX-this.offsetLeft；
rect.startY=e.pageY-this.offsetTop；
阻力=真；
}
函数mouseUp（）{
rectStartXArray[rectStartXArray.length]=rect.startX；
rectStartYArray[rectStartYArray.length]=rect.startY；
rectWArray[rectWArray.length]=rect.w；
rectHArray[rectHArray.length]=rect.h；
阻力=假；
}
函数mouseMove（e）{
如果（拖动）{
rect.w=（e.pageX-this.offsetLeft）-rect.startX；
rect.h=（e.pageY-this.offsetTop）-rect.startY；
clearRect（0，0，canvas.width，canvas.height）；
draw（）；
}
//drawOldShapes（）；
}
函数绘图（）{
ctx.beginPath（）；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（rect.startX、rect.startY、rect.w、rect.h）；
ctx.stroke（）；
}
函数drawOldShapes（）{
对于（var i=0；i您正在通过调用ctx.fillRect（rect.startX，rect.startY，rect.w，rect.h）；
清除draw（）中的整个画布。@AshwinVenkataraman。如果此答案满足您的问题，您应该单击绿色复选标记，以便将您的问题从“未回答”中删除Stackoverflow上的列表。；-）
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        ctx.drawImage(imageObj, 69, 50);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

// ctx.globalAlpha = 0.5;
rect = {},
drag = false;
var rectStartXArray = new Array() ;
var rectStartYArray = new Array() ;
var rectWArray = new Array() ;
var rectHArray = new Array() ;

function init() {
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}
function mouseUp() {
    rectStartXArray[rectStartXArray.length] = rect.startX;
    rectStartYArray[rectStartYArray.length] = rect.startY;
    rectWArray[rectWArray.length] = rect.w;
    rectHArray[rectHArray.length] = rect.h;
    drag = false;
}

function mouseMove(e) {
  if (drag) {
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        draw();
    }

    //drawOldShapes();
}
function draw() {
    ctx.beginPath(); 
    ctx.fillStyle="#FF0000";
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
    ctx.stroke();
}
function drawOldShapes(){
    for(var i=0;i<rectStartXArray.length;i++)
    {
        if(rectStartXArray[i]!= rect.startX && rectStartYArray[i] != rect.startY && rectWArray[i] != rect.w && rectHArray[i] != rect.h)
        {
            ctx.beginPath();
            ctx.fillStyle="#FF0000";
            ctx.fillRect(rectStartXArray[i], rectStartYArray[i], rectWArray[i], rectHArray[i]);
            ctx.stroke();
        }
    }
}
init();
</script>
  </body>
</html>