Question

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

我做错了什么？

<!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>

Answer 1

您正在通过调用draw()清除ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);内的整个画布。删除该行，它的工作原理。小提琴 - http://jsfiddle.net/da8wv75k/

使用拖动事件

1 个答案: