我正在通过拖动鼠标绘制矩形。
每次我开始在 Canvas 中拖动时， Canvas 都会清除并变为空白，一旦我停止拖动，绘图就会重新出现。
我认为 clearRect() 不会造成问题，但我可能错了。
我可能做错了什么，我该如何解决？
下面是我的代码:
<body>
<canvas id ="canv" width="1000" height="600" ></canvas>
<div id="button">
<input type="button" id="clear" value="Clear">
</div>
</body>
<script>
var canv = document.getElementById('canv'),
ctx = canv.getContext('2d'),
rect = [],
move = false;
var newRect;
var startX, startY, mouseX, mouseY;
var offsetX,offsetY;
function reOffset(){
var bound = canv.getBoundingClientRect();
offsetX = bound.left;
offsetY = bound.top;
}
reOffset();
function movement(){
canv.addEventListener('mousedown', mouseDown, false);
canv.addEventListener('mouseup', mouseUp, false);
canv.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(event){
startX=parseInt(event.clientX-offsetX);
startY=parseInt(event.clientY-offsetY);
move = true;
}
function mouseUp(event){
mouseX=parseInt(event.clientX-offsetX);
mouseY=parseInt(event.clientY-offsetY);
move = false;
if(!overlap(newRect)){
rect.push(newRect);
}
make();
//ctx.fillRect(q.left,q.top,q.right-q.left,q.bottom-q.top);
}
function make(){
for(var i = 0; i < rect.length; i++){
var q = rect[i];
ctx.fillStyle = randomColour();
ctx.fillRect(q.left, q.top, q.right - q.left, q.bottom - q.top);
}
}
function mouseMove(event){
if(move){
mouseX=parseInt(event.clientX - offsetX);
mouseY=parseInt(event.clientY - offsetY);
newRect = {
left : Math.min(startX , mouseX),
right : Math.max(startX , mouseX),
top : Math.min(startY , mouseY),
bottom : Math.max(startY , mouseY),
}
ctx.clearRect(0, 0, canv.width, canv.height);
ctx.strokeRect(startX, startY, mouseX-startX, mouseY-startY);
}
}
function randomColour() {
var colour = [];
for (var i = 0; i < 3; i++) {
colour.push(Math.floor(Math.random() * 256));
}
return 'rgb(' + colour.join(',') + ')';
}
function overlap(newRect){
var q1 = newRect;
//if one rect is completely inside another rect
var inside = function(rectx, recty){
return(recty.left >= rectx.left &&
recty.right <= rectx.right &&
recty.top >= rectx.top &&
recty.bottom <= rectx.bottom);
}
//if the new rect is overlapping any existing rect
var isOverlaping = false;
for(var i = 0; i < rect.length; i++){
var q2 = rect[i];
var isIntersecting = !(q1.left > q2.right ||
q1.right < q2.left ||
q1.top > q2.bottom ||
q1.bottom < q2.top);
var isContain = inside(q2, q1) || inside(q1, q2);
if(isIntersecting || isContain){
isOverlaping=true;
}
}
return(isOverlaping);
}
movement();
//clear the canvas for redrawing
document.getElementById('clear').addEventListener('click', function () {
rect = [];
console.log(rect);
ctx.clearRect(0, 0, canv.width, canv.height);
}, false);
</script>
最佳答案
您可以通过在鼠标移动时绘图来解决此问题。以前您正在清除它但从不在鼠标移动时重新绘制。我修改了颜色的分配方式，这是一个显示它工作的 fiddle :https://jsfiddle.net/7xrgrqwx/2/
function make() {
for (var i = 0; i < rect.length; i++) {
var q = rect[i];
ctx.fillStyle = q.color;
ctx.fillRect(q.left, q.top, q.right - q.left, q.bottom - q.top);
}
}
function mouseMove(event) {
if (move) {
mouseX = parseInt(event.clientX - offsetX);
mouseY = parseInt(event.clientY - offsetY);
newRect = {
left: Math.min(startX, mouseX),
right: Math.max(startX, mouseX),
top: Math.min(startY, mouseY),
bottom: Math.max(startY, mouseY),
color: randomColour(),
}
ctx.clearRect(0, 0, canv.width, canv.height);
ctx.strokeRect(startX, startY, mouseX - startX, mouseY - startY);
make();
}
}
关于javascript - 每次我拖动 Canvas 清除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48371792/