畫布中的橡皮HTML 5

Question

我使用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

Answer 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;