javascript 使用javascript中的mousemove事件在画布内的图像上绘制矩形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31694870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw a rectangle on a image inside a canvas using mousemove event in javascript
提问by Gajini
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 .
我正在尝试使用 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>回答by Tahir Ahmed
You probably need to first clear the entire canvas using clearRect, then draw your imageObjimmediately and finally, draw the stroke. All of this happening inside the mouseMovefunction so it basically keeps drawing these elements on a continuous basis.
您可能需要先使用 清除整个画布clearRect，然后imageObj立即绘制，最后绘制笔划。所有这些都发生在mouseMove函数内部，因此它基本上会持续绘制这些元素。
Try this snippet below:
试试下面的这个片段：
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.
希望这是您一直在寻找的东西，并以某种方式帮助您。
P.S. I have intentionally applied the redcolour on the stroke. You can remove it of course.
PS 我有意red在笔划上应用了颜色。你当然可以删除它。
