Question

// JQUERY

var needFirstPoint = true;
var needSecondPoint = false;
var x1, y1;

绘制线条的功能

function drawNextLine(ctx, x, y) {
if (needFirstPoint) {
    ctx.lineWidth = 1;
    ctx.beginPath();
    needFirstPoint = false;                
    needSecondPoint = true;
}
else if(needSecondPoint){
    ctx.moveTo(x1, y1);
    ctx.lineTo(x, y);
    ctx.stroke();
}
    }

    $(document).ready(function(){
    var beginPaint=false;
    var canvas = $('#myCanvas').get(0);
    if (!canvas.getContext) { return; }
    var ctx = canvas.getContext('2d');

鼠标按下时的事件

    $('#myCanvas').on('mousedown', function(e){
        beginPaint = true;
        var offset = $(this).offset();
        x1 = e.pageX - offset.left;
        y1 = e.pageY - offset.top;
        drawNextLine(ctx, x1, y1);
    });

鼠标加注事件

    $('#myCanvas').on('mouseup', function(e){
        var offset = $(this).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        beginPaint=false;
        drawNextLine(ctx, x, y); 
        $('#myCanvas').css('cursor','default');
        needSecondPoint = true;
    });

如何清除鼠标移动功能绘制的线条，并在调用鼠标时显示一行目前它显示了mousemove期间生成的所有行。

 $('#myCanvas').on('mousemove', function(e){
            if(beginPaint) {            
                //ctx.clearRect(0, 0, 500, 500); //TRIED THIS
                //ctx.clear(); //TRIED THIS
                var offset = $(this).offset();
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;
                drawNextLine(ctx, x, y);            
            }
        });
    });

// HTML

    <canvas id="myCanvas" width="600" height="600"></canvas>

// CSS

 canvas {
       border: 1px solid #000;
       cursor: crosshair;
   }

Answer 1

您可以使用临时暂存画布让用户绘制新行：

在mousedown上，直接在主画布顶部移动第二个临时画布。
在临时画布上绘制一个新行
在mouseup上，将最后一行从临时画布绘制到主画布

演示：http://jsfiddle.net/m1erickson/6LcgR/

以下是示例代码：

<!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>

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

<script>
$(function(){

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

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

    var startX;
    var startY;
    var isDown=false;



    $("#canvasTemp").css({ left:-500, top:0 });

    function drawLine(toX,toY,context){
        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(toX,toY);
        context.stroke();
    }

    function handleMouseDown(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#downlog").html("Down: "+ mouseX + " / " + mouseY);

      // Put your mousedown stuff here
      startX=mouseX;
      startY=mouseY;
      ctxTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
      $("#canvasTemp").css({ left:0, top:0 });
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      if(!isDown){return;}
      isDown=false;
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#canvasTemp").css({ left:-500, top:0 });
      drawLine(mouseX,mouseY,ctx);
    }

    function handleMouseOut(e){
      e.preventDefault();        
      if(!isDown){return;}
      isDown=false;
      $("#canvasTemp").css({ left:-500, top:0 });
    }

    function handleMouseMove(e){
      e.preventDefault();        
      if(!isDown){return;}
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      ctxTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
      drawLine(mouseX,mouseY,ctxTemp);
      console.log(mouseX+"/"+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);});

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

</head>

<body>
    <h4>Drag and release to create a new line</h4>
    <h4>New lines are first drawn to a temp canvas</h4>
    <h4>On mouseup, the final temp line is drawn to main canvas</h4>
    <div id="wrapper">
        <canvas id="canvasTemp" width=300 height=200></canvas>
        <canvas id="canvas" width=300 height=200></canvas>
    </div>
</body>
</html>

如何清除画布中的所有行并在mouseup上显示最后一行

1 个答案: