使用 javascript 中的 mousemove 事件在画布内的图像上绘制矩形

2022-01-17 00:00:00 canvas jquery javascript html html5-canvas

我正在尝试使用 mousemove 事件在画布内的图像上绘制一个矩形.但是由于 clearRect ，我在图像上得到了矩形，矩形中填充了颜色.谁能弄清楚我.如何在图像上绘制一个只有边框的矩形.下面是我实现它的代码.

I am trying to draw a rectangle on an image that is inside canvas using mousemove event . But i am getting rectangle on the image with color filled in the rectangle because of clearRect . can anyone figure me out . how to draw a rectangle with just a border on the image . Below is the code that i followed to achieve it .

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>

推荐答案

您可能需要先使用 clearRect 清除整个画布，然后立即绘制您的 imageObj，画笔画.所有这些都发生在 mouseMove 函数中，因此它基本上会持续不断地绘制这些元素.

You probably need to first clear the entire canvas using clearRect, then draw your imageObj immediately and finally, draw the stroke. All of this happening inside the mouseMove function so it basically keeps drawing these elements on a continuous basis.

试试下面的这段代码:

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>

希望这正是您所寻找的，并能以某种方式帮助您.

Hope this is what you were looking for and helps you in some way.

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

P.S. I have intentionally applied the red colour on the stroke. You can remove it of course.

相关文章