使用 javascript 中的 mousemove 事件在 canvas 中的图像上绘制一个矩形

Question

我正在尝试使用 mousemove 事件在 canvas 内的图像上绘制一个矩形。但是由于 clearRect ，我在图像上得到了矩形，矩形中填充了颜色。谁能弄明白我的意思。如何在图像上绘制一个只有边框的矩形。下面是我为实现它而遵循的代码。

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rect = {},
    drag = false;
 function init() {
  var imageObj = new Image();

      imageObj.onload = function() {
        ctx.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
   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() {
   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(rect.startX, rect.startY,rect.w,rect.h);
  draw();
   }
 }
 function draw() {
   ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
   ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
 }

<head>
<meta charset="utf-8" />
<title>Draw a rectangle!</title>
</head>

<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas>
</body>

Answer 1

您可能需要先使用clearRect清除整个canvas，然后立即绘制您的imageObj，最后绘制笔划。所有这一切都发生在 mouseMove 函数内部，因此它基本上是在连续的基础上绘制这些元素。

试试下面的代码片段：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var imageObj = null;

function init() {
    imageObj = new Image();
    imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    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() { drag = false; }

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.drawImage(imageObj, 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);
    }
}
//
init();

<canvas id="canvas" width="500" height="500"></canvas>

希望这就是您要找的东西并能以某种方式帮助您。

P.S。我特意在笔划上应用了 red 颜色。你当然可以删除它。

使用 javascript 中的 mousemove 事件在 canvas 中的图像上绘制一个矩形

Draw a rectangle on a image inside a canvas using mousemove event in javascript

html

javascript

jquery

canvas

html5-canvas