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

Question

我正在尝试使用 mousemove 事件在画布内的图像上绘制一个矩形。 但是由于 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清除整个画布，然后立即绘制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>

希望这就是您正在寻找的内容并以某种方式帮助您。

PS 我特意在笔画上应用了red 。 你当然可以删除它。