Question

借助互联网的大量帮助，我现在可以通过在画布上拖动鼠标在画布上绘制圆圈和箭头线。现在的问题是我无法抹去我画的东西。我需要一个橡皮擦工具来擦除一小部分图纸。

我要画的是我创作了两幅画布。我将在第一个画布（ temp canvas ）上绘制并将其复制到第二个画布（主画布）。我在画布上绘制的每个新对象都是这种情况。

temp canvas 重叠在主画布上。所以我使用 temp canvas 跟踪鼠标事件。然后我在主画布上使用.clearRect() 。

请告诉我我在这里犯的错误。提前谢谢。

这是我的代码（JS，CSS，HTML）：

＆＃13;

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var color = 'red';
var tool = 1;

var select = document.forms[0].disease;
select.onchange = function() {
  var disease = select.options[select.selectedIndex].text;

  if (disease == "Exudates") color = 'red';
  else color = 'green';

  context.strokeStyle = color;
};

var select2 = document.forms[0].tool;
select2.onchange = function() {
  tool = select2.options[select2.selectedIndex].value;
  context.lineWidth = tool;
};

function draw(mode) {
  var tempcontext = tempcanvas.getContext('2d'),
      w = canvas.width,
      h = canvas.height,
      x1,
      y1,
      isDown = false;

  tempcanvas.onmousedown = function(e) {
    var pos = getPosition(e, canvas);
    x1 = pos.x;
    y1 = pos.y;
    isDown = true;
  };
  tempcanvas.onmouseup = function() {
    isDown = false;
    context.drawImage(tempcanvas, 0, 0);
    tempcontext.clearRect(0, 0, w, h);
  };
  tempcanvas.onmousemove = function(e) {
    if (!isDown) return;

    var pos = getPosition(e, canvas);
    x2 = pos.x;
    y2 = pos.y;

    tempcontext.clearRect(0, 0, w, h);
    if (mode == "Circles") drawEllipse(x1, y1, x2, y2);
    if (mode == "Lines") drawArrow(x1, y1, x2, y2);
  };

  function drawEllipse(x1, y1, x2, y2) {
    var radiusX = (x2 - x1) * 0.5,
        radiusY = (y2 - y1) * 0.5,
        centerX = x1 + radiusX,
        centerY = y1 + radiusY,
        step = 0.01,
        a = step,
        pi2 = Math.PI * 2 - step;

    tempcontext.beginPath();
    tempcontext.moveTo(centerX + radiusX * Math.cos(0), 
                       centerY + radiusY * Math.sin(0));

    for (; a<pi2; a+=step) {
      tempcontext.lineTo(centerX + radiusX * Math.cos(a), 
                         centerY + radiusY * Math.sin(a));
    }

    //tempcontext.fillStyle=color;
    tempcontext.font = "20px Georgia";
    if (color == "red") tempcontext.fillText("Exudate", x2, y2);
    else tempcontext.fillText("Red Lession", x2, y2);

    tempcontext.closePath();
    tempcontext.lineWidth = tool;
    tempcontext.strokeStyle = color;
    tempcontext.stroke();
  };

  function drawArrow(x1, y1, x2, y2) {
    var headLength = 10,
        step = 0.01,
        a = step,
        pi2 = Math.PI * 2 - step;

    tempcontext.beginPath();
    tempcontext.moveTo(x1, y1);

    for (; a<pi2; a+=step) {
      tempcontext.lineTo(x2, y2);

      var degreesInRadians225 = 225 * Math.PI / 180;
      var degreesInRadians135 = 135 * Math.PI / 180;

      var dx = x2 - x1;
      var dy = y2 - y1;
      var angle = Math.atan2(dy, dx);

      var x225 = x2 + headLength * Math.cos(angle + degreesInRadians225);
      var y225 = y2 + headLength * Math.sin(angle + degreesInRadians225);
      var x135 = x2 + headLength * Math.cos(angle + degreesInRadians135);
      var y135 = y2 + headLength * Math.sin(angle + degreesInRadians135);

      // draw partial arrowhead at 225 degrees
      tempcontext.moveTo(x2, y2);
      tempcontext.lineTo(x225, y225);
      // draw partial arrowhead at 135 degrees
      tempcontext.moveTo(x2, y2);
      tempcontext.lineTo(x135, y135);
    }

    tempcontext.closePath();
    tempcontext.lineWidth = tool;
    tempcontext.strokeStyle = color;
    tempcontext.stroke();
  };
}

function erase() {
  tempcanvas.onmousedown = function(e) {
    var pos = getPosition(e, canvas);
        mousedown = true;
        context.beginPath();
        context.moveTo(pos.x, pos.y);
  };
  tempcanvas.onmouseup = function(e) {
    mousedown = false;
  };
  tempcanvas.onmousemove = function(e) {
    if (!mousedown) return;
    context.clearRect(pos.x, pos.y, 10, 10);
  };
}

function getPosition(e, gCanvasElement) {
  var x;
  var y;

  x = e.pageX;
  y = e.pageY;

  x -= gCanvasElement.offsetLeft;
  y -= gCanvasElement.offsetTop;

  return {x:x, y:y};
}

function save() {
  var canvas2 = document.getElementById('canvas2');
  var context2 = canvas2.getContext('2d');

  var img = document.getElementById("result");
      context2.drawImage(img, 0, 0, 300, 300);
      context2.drawImage(canvas, 0, 0);

  var canvasData = canvas2.toDataURL();
  document.getElementById('canvasImg').src = canvasData;
};

＆＃13;

#myCanvas {
  background: url("images/<s:property value="userImageFileName"/>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#myCanvas,
#tempcanvas {
  cursor: pointer;
  border: 1px solid black;
  position: absolute;
  left: 0;
  top: 0;
}
#myCanvas:active,
#tempcanvas:active {
  cursor: crosshair;
}

＆＃13;

<html>
  <head>
    <title>Success: Upload User Image</title>
  </head>
  
  <body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Please use a modern browser like Firefox, Chrome, Safari</canvas>
    <canvas id="tempcanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <form>
      <select name='tool' onChange="split()">
        <option value='2'>Pen</option>
        <option value='5'>Sketch</option>
      </select>
      
      <select name='disease' onChange="split()">
        <option>Exudates</option>
        <option>Red Lessions</option>
      </select>
    </form>

    <input type="button" value="eraser" onClick="erase()" />
    <input type="button" value="circles" onclick="draw('Circles')" />
    <input type="button" value="lines" onclick="draw('Lines')" />
    <input type="submit" value="save" onClick="save()" />
  </body>
</html>

＆＃13;

Answer 1

最后，当互联网没有帮助我时，我自己找到了答案。此处更改了擦除的代码。

function erase(){
    var mousedown = false;
    tempcanvas.onmousedown = function(e) {
        mousedown = true; 
    };
    tempcanvas.onmouseup = function(e) {
        mousedown = false;
    };
    tempcanvas.onmousemove = function(e) {
        if (!mousedown) return;     
        var pos = getPosition(e, canvas);
        context.clearRect(pos.x,pos.y,10,10);   
    };
}

无法删除画布上绘制的线条

1 个答案: