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中的多画布层涂料应用程序

回答

相关问题