Question

我正在使用HTML5画布构建带有橡皮擦选项的绘图工具。画布加载背景图像，用户可以在图像上绘制绘画。但是在使用橡皮擦工具时，只应擦除绘制的部分（而不是图像的一部分）。我知道我必须使用多个画布。如果可以的话，请帮我一些代码示例。提前致谢。

Answer 1

是的，您可以使用2幅画布来支持坚不可摧的背景和素描前景。

BTW，背景不需要是画布。它可能只是一个包含内容的图像或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>

HTML5中的多画布层绘制应用程序

1 个答案: