HTML5中的多畫布層塗料應用程序

我正在使用HTML5畫布創建帶橡皮擦選項的塗料工具。畫布加載背景圖像，用戶可以繪製圖像。但是在使用橡皮擦工具時，只有被塗抹的部分應該被擦除（而不是圖像的一部分）。我知道我必須使用多於一個的畫布。如果可以的話，請幫助我一些代碼示例。提前致謝。HTML5中的多畫布層塗料應用程序

來源

2013-09-24 Deepu S A

顯示兩個畫布在同一位置，但具有不同的z-index。讓用戶只與頂部畫布交互（實際上，您不需要底部畫布，也可以使用絕對定位的圖像或背景圖像）。如果你需要明確的例子來說明如何在畫布上工作，你應該首先閱讀一些資源。 – Zeta

有趣的是，我自己製作了一個HTML5「塗鴉板」應用程序。你是對的 - 使用兩個畫布元素。將它們放在絕對位置並將它們層疊在一起。將背景應用於背面的畫布上下文，並在前面的畫布上下文中完成所有繪畫。如果你已經有一個畫布可以繪製，只需創建另一個畫布並將其背景編輯功能指向它，而不是繪製畫布。 –

@Zeta +1表示背景不需要是畫布。 –

是的，你可以使用2個畫布來支持堅不可摧的背景和素描前景。

順便說一句，背景不需要是一個畫布。它可能只是一個帶有內容的圖像或div。

快速插圖

你可以用你的背景和素描油畫在包裝DIV：

<div id="wrapper"> 
     <canvas id="canvas2" width=300 height=200></canvas> 
     <canvas id="canvas" width=300 height=200></canvas> 
    </div>

然後用CSS來草繪帆布直接定位在背景畫布之上：

body{ background-color: ivory; } 
    #wrapper{ 
     position:relative; 
     width:300px; 
     height:200px; 
    } 
    #canvas,#canvas2{ 
     position:absolute; top:0px; left:0px; 
     border:1px solid green; 
     width:100%; 
     height:100%; 
    } 
    #canvas2{ 
     border:2px solid red; 
    }

這是一個小插圖應用程序，它使用背景畫布顯示藍色黑色回合。

草圖畫布（頂部）用於繪製和擦除。

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/G6JAK/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> 

<style> 
    body{ background-color: ivory; } 
    #wrapper{ 
     position:relative; 
     width:300px; 
     height:200px; 
    } 
    #canvas,#canvas2{ 
     position:absolute; top:0px; left:0px; 
     border:1px solid green; 
     width:100%; 
     height:100%; 
    } 
    #canvas2{ 
     border:2px solid red; 
    } 
</style> 

<script> 
$(function(){ 

    var canvas2=document.getElementById("canvas2"); 
    var ctx2=canvas2.getContext("2d"); 
    ctx2.fillStyle="skyBlue"; 
    ctx2.lineWidth=5; 
    ctx2.fillRect(0,0,canvas2.width,canvas2.height); 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    ctx.lineCap = "round"; 
    ctx.lineJoin = "round"; 
    ctx.lineWidth=3; 
    var lastX; 
    var lastY; 

    var mouseX; 
    var mouseY; 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var isMouseDown=false; 


    function handleMouseDown(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousedown stuff here 
     lastX=mouseX; 
     lastY=mouseY; 
     isMouseDown=true; 
    } 

    function handleMouseUp(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseup stuff here 
     isMouseDown=false; 
    } 

    function handleMouseOut(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseOut stuff here 
     isMouseDown=false; 
    } 

    function handleMouseMove(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     if(isMouseDown){ 
      ctx.beginPath(); 
      if(mode=="pen"){ 
       ctx.globalCompositeOperation="source-over"; 
       ctx.moveTo(lastX,lastY); 
       ctx.lineTo(mouseX,mouseY); 
       ctx.stroke();  
      }else{ 
       ctx.globalCompositeOperation="destination-out"; 
       ctx.arc(lastX,lastY,5,0,Math.PI*2,false); 
       ctx.fill(); 
      } 
      lastX=mouseX; 
      lastY=mouseY; 
     } 
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 

    var mode="pen"; 
    $("#pen").click(function(){ mode="pen"; }); 
    $("#eraser").click(function(){ mode="eraser"; }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <div id="wrapper"> 
     <canvas id="canvas2" width=300 height=200></canvas> 
     <canvas id="canvas" width=300 height=200></canvas> 
    </div> 
    <button id="pen">Pen</button> 
    <button id="eraser">Eraser</button> 
</body> 
</html>

來源

2013-09-24 16:36:47 markE

HTML5中的多畫布層塗料應用程序

回答

相關問題