我使用HTML5画布创建一个绘图应用程序。我确实使用背景图片。但是用橡皮擦。当我删除它时，下一个图像也被删除。谁能帮帮我？
此HTML：
<form>
<div>
<label for="pencil">Pencil</label>
<input id="pencil" type="radio" name="tool" value="pencil" checked>
</div>
<div>
<label for="eraser">Eraser</label>
<input id="eraser" type="radio" name="tool" value="eraser">
</div>
</form>
<div id="sketch">
<canvas id="paint"></canvas>
</div>
和Javascript：
(function() {
var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
// draw image
var img = new Image();
img.src = 'http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg';
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Determine Tool
var tool = 'pencil';
document.querySelector('#pencil').onchange = function() {
if (this.checked)
tool = 'pencil';
// Show Tmp Canvas
tmp_canvas.style.display = 'block';
};
document.querySelector('#eraser').onchange = function() {
if (this.checked)
tool = 'eraser';
// Hide Tmp Canvas
tmp_canvas.style.display = 'none';
};
// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;
sketch.appendChild(tmp_canvas);
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
// Pencil Points
var ppts = [];
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function(e) {
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);
canvas.addEventListener('mousemove', function(e) {
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);
/* Drawing on Paint App */
tmp_ctx.lineWidth = 5;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = 'blue';
tmp_ctx.fillStyle = 'blue';
tmp_canvas.addEventListener('mousedown', function(e) {
tmp_canvas.addEventListener('mousemove', onPaint, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push({x: mouse.x, y: mouse.y});
onPaint();
}, false);
tmp_canvas.addEventListener('mouseup', function() {
tmp_canvas.removeEventListener('mousemove', onPaint, false);
ctx.globalCompositeOperation = 'source-over';
// Writing down to real canvas now
ctx.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
// Emptying up Pencil Points
ppts = [];
}, false);
var onPaint = function() {
// Saving all the points in an array
ppts.push({x: mouse.x, y: mouse.y});
if (ppts.length < 3) {
var b = ppts[0];
tmp_ctx.beginPath();
//ctx.moveTo(b.x, b.y);
//ctx.lineTo(b.x+50, b.y+50);
tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
tmp_ctx.fill();
tmp_ctx.closePath();
return;
}
// Tmp canvas is always cleared up before drawing.
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
tmp_ctx.beginPath();
tmp_ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i++) {
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
tmp_ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
tmp_ctx.stroke();
};
canvas.addEventListener('mousedown', function(e) {
canvas.addEventListener('mousemove', onErase, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push({x: mouse.x, y: mouse.y});
onErase();
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onErase, false);
// Emptying up Pencil Points
ppts = [];
}, false);
var onErase = function() {
// Saving all the points in an array
ppts.push({x: mouse.x, y: mouse.y});
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.strokeStyle = 'rgba(0,0,0,1)';
ctx.lineWidth = 5;
if (ppts.length < 3) {
var b = ppts[0];
ctx.beginPath();
//ctx.moveTo(b.x, b.y);
//ctx.lineTo(b.x+50, b.y+50);
ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0);
ctx.fill();
ctx.closePath();
return;
}
// Tmp canvas is always cleared up before drawing.
// ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i++) {
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
ctx.stroke();
};
}());
链接DEMO： DEMO
答案 0 :(得分：1)
如果您不想删除背景图像，请将图像设置为容器div（#sketch）的背景，而不是将其绘制在画布本身上。
// create a url string of your background image
bkImageURL="url(http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg)";
// set the background-image of your container div to that url
sketch.style.backgroundImage = bkImageURL;
答案 1 :(得分：0)
创建两个具有不同ID的画布元素。对于此示例，我们将第一个画布（或底层）称为“背景”，将第二个画布（或顶层）称为“ sketchpad”：
使用CSS将一个直接定位在另一个之上。记住要指定z值并使“ sketchpad”元素具有更高的值。如果需要帮助完成此步骤，可以搜索StackOverflow。
将背景图像绘制到“背景”画布上。这是一些示例代码：
//指定背景画布元素 bgCanvas = document.getElementbyId（'background'）; //指定画布上下文 ctx = bgCanvas.getContext（'2d'）;
//创建新的背景图片 var bgImg = new Image（）;
///在背景画布上绘制背景图像 bgImg.onload =函数（） { //绘制背景图片 ctx.drawImage（bgImg，0，0）; } bgImg.src ='./path/to/image/file';
将“ sketchpad”画布用于绘制/擦除功能。