在html5畫布中的橡皮擦工具

您好我正在建立一個Windows應用商店應用程序html5和javascript在我的應用程序我試圖實現橡皮擦工具，但這是有問題的，因爲如果用戶移動圖像或其他圖層到他們的地方先前被刪除，他們看到他們擦除的白色繪圖。我一直在努力做的，例如我已經改變了默認globalCompositeOperation爲「目的地去」這樣的代碼在html5畫布中的橡皮擦工具

  //Here is the error. 
     if (clickTool[j] == "eraser") { 
      ctx.globalCompositeOperation = 'destination-out'; 
      ctx.fillStyle = 'rgba(255,0,0,0.5);'; 
      ctx.strokeStyle = 'rgba(255,0,0,0.5);'; 

     } 
     else { 
      ctx.globalCompositeOperation = "source-over"; 
      ctx.strokeStyle = clickColor[j]; 
     }

不同的方式橡皮擦工具，但不幸的是它doesn't爲我工作。我已經上傳了我的所有代碼到這個鏈接：

My code

請我希望有人能幫助我。

謝謝，我很抱歉我的演講，我是墨西哥人。

來源

2013-04-05 Oscar Emilio Perez Martinez

使用多個圖層。爲背景圖像繪製一個畫布，爲繪圖另設一個畫布;那就是爲什麼你永遠不會抹去任何背景圖像。

如果需要，可以有多個圖層，因爲它們通常不會影響性能。

當然，如果您可以合併圖層，請將最後繪製的圖形稱爲背景圖層，如果您認爲繪圖是「永久性」的話。

來源

2013-04-05 01:12:48 Jarrod

非常有用的透明顏色的橡皮使用的代碼回答謝謝。 – 2013-04-07 01:11:35

@OscarPerezMartinez不用擔心。如果選擇答案，請不要忘記接受:) – Jarrod 2013-04-08 22:26:40

保持一組中點。先使用globalCompositeOperation作爲'destination-out'，然後再用'source-over'做出透明的橡皮擦線跡。

以下是你需要用鼠標移動功能

var handleMouseMove = function (event) { 
    midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1); 

    if(curTool.type=="eraser"){ 

      var tempcanvas = document.getElementById('drawcanvas'); 
    var tempctx=tempcanvas.getContext("2d"); 
    tempctx.beginPath(); 
    tempctx.globalCompositeOperation = "destination-out"; 
    tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);  
    tempctx.fill(); 
    tempctx.closePath(); 
    tempctx.globalCompositeOperation = "source-over"; 
    drawingCanvas.graphics.clear(); 

    // keep updating the array for points 
    arrMidPtx.push(midPt.x); 
    arrMidPty.push(midPt.y); 
    stage.addChild(drawingCanvas); 
    stage.update(); 

    }   

    };

我用這個代碼，以使一個行爲像鋼筆，而是充滿了白色

來源

2015-02-28 09:55:21 Altanai

在html5畫布中的橡皮擦工具

回答

相關問題