使用javascript中的mousemove事件在画布内的图像上绘制一个矩形 [英] Draw a rectangle on a image inside a canvas using mousemove event in javascript
问题描述
我正在尝试使用mousemove事件在canvas中绘制一个矩形。但由于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.
PS我故意在笔画上应用红色颜色。你当然可以删除它。
P.S. I have intentionally applied the red colour on the stroke. You can remove it of course.
这篇关于使用javascript中的mousemove事件在画布内的图像上绘制一个矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
