Zeichne ein Rechteck auf ein Bild in einer Leinwand mit dem Mauszeiger-Ereignis in Javascript

Question

Jul 29, 2015, 10:14 AM

html5 javascript canvas html5-canvas jquery

Zeichne ein Rechteck auf ein Bild in einer Leinwand mit dem Mauszeiger-Ereignis in Javascript

Ich versuche, ein Rechteck auf ein Bild zu zeichnen, das sich im Canvas-Bereich befindet. Aber ich erhalte Rechteck auf dem Bild mit der Farbe, die im Rechteck wegen clearRect gefüllt wird. Kann mich jemand ausfindig machen? Wie zeichnet man ein Rechteck mit nur einem Rand auf dem Bild. Unten ist der Code, den ich befolgt habe, um es zu erreichen.

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>