HTML 5 удаление последней нарисованной фигуры

Question

Я новичок в холсте HTML 5, я пытаюсь нарисовать прямоугольник, где находится мышь, это прекрасно работает. Но я должен удалить последний обратный прямоугольник. Но когда я удаляю последний обратный прямоугольник, базовая сетка отображается неправильно. Я попытался добавить код в jsfiddle, но он не сработает :(http://jsfiddle.net/L5YE8/, но там вы можете увидеть код и, возможно, помочь мне. Как сказано, базовая сетка становится испорченной при удалении последней нарисованной фигуры.

мой удаление части:.

function eraseCell(cell) { 
var x = (cell.column * kSizePix); 
var y = (cell.row * kSizePix); 

/*canvas_context.beginPath(); 
canvas_context.rect(x, y, kSizePix, kSizePix); 
canvas_context.fillStyle = 'white'; 
canvas_context.fill(); 
canvas_context.strokeStyle = "white"; 
canvas_context.stroke();*/ 

canvas_context.clearRect(x, y, kSizePix, kSizePix); 
} 

спасибо за вашу помощь

Answer 1

похоже, вы пытаетесь «стереть», рисуя белый прямоугольник

Это не отменяет последний прямоугольник, его просто рисует на другом белом прямоугольнике Вверх.

Холст не выполняет слоирование, он просто добавляет дополнительную краску, где вы говорите ей рисовать.

Так что если вы хотите нарисовать перекрывающихся прямоугольников, а затем удалить один из них, вы можете:

• Сохранить определение каждого прямоугольника,
• Очистить весь холст,
• перерисовать все прямоугольники, за исключением «стертый» прямоугольник на основе сохраненных определений.

Типичный способ сохранения определения прямоугольника находится в JavaScript Object:

var rect1 = { x:50, y:75, width:40, height:20, color:"red" }; 

Вы можете сохранить все накопившиеся прямоугольников в массиве, как пользователь рисует их:

var rectArray=[]; 

// add the first rectangle rectangle 

rectArray.push({ x:50, y:75, width:40, height:20, color:"red" }); 

// add more rectangles 

rectArray.push({ x:100, y:125, width:20, height:30, color:"green" }); 
rectArray.push({ x:110, y:145, width:20, height:30, color:"blue" }); 
rectArray.push({ x:120, y:165, width:20, height:30, color:"purple" }); 

Затем, чтобы перерисовать все, кроме последнего прямоугольника, вы можете перечислить через массив перерисовать каждый из сохраненных прямоугольников из их определения:

// remove the last rect definition from the array 
rectArray.pop(); 

// clear the canvas and redraw all rects based on their saved definitions 

context.clearRect(0,0,canvas.width,canvas.height); 

for(var i=0; i<rectArray.length; i++){ 
    var rect=rectArray[i]; 
    context.beginPath(); 
    context.rect(rect.x, rect.y, rect.width, rect.height); 
    context.stroke(); 
    context.fillStyle=rect.color; 
    context.fill(); 
} 

Answer 2

В качестве альтернативы предложению markE вы также можете сложить несколько <canvas> 'es, разместив их друг над другом с позиционированием CSS. Таким образом, вы можете удалить части верхнего холста с помощью clearRect, не перерисовывая холст фона под ним.