1

HTML5 キャンバスを使用して、消しゴム オプション付きのペイント ツールを作成しています。キャンバスは背景画像をロードし、ユーザーはその画像に絵を描くことができます。ただし、消しゴムツールを使用すると、ペイントされた部分のみが消去されます（画像の一部ではありません）。複数のキャンバスを使用する必要があることはわかっています。可能であれば、コード例を教えてください。前もって感謝します。

4

1 に答える 1

0

はい、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-24T16:36:47.023 に答える