Question

我来这里是为了在HTML / Javascript中提供一个干净的画布问题。在这个画布中，它用于签名（如this）。

如果我使用这些代码行：

var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;

var x = "black",
    y = 2;

function save() {
  var canvas = document.getElementById("can");
  var dataURL = canvas.toDataURL("image/png");
  document.getElementById('source').value = dataURL;
  var fd = new FormData(document.forms["general"]);

  var xhr = new XMLHttpRequest();
  xhr.open('Get', 'convertToPdf.php', true);

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
      alert('Succesfully uploaded');
    }
  };

  xhr.onload = function() {

  };
  xhr.send(fd);
}

function color(obj) {
  switch (obj.id) {
    case "green":
      x = "green";
      break;
    case "blue":
      x = "blue";
      break;
    case "red":
      x = "red";
      break;
    case "yellow":
      x = "yellow";
      break;
    case "orange":
      x = "orange";
      break;
    case "black":
      x = "black";
      break;
    case "white":
      x = "white";
      break;
  }
  if (x == "white") y = 14;
  else y = 2;

}

function draw() {
  ctx.beginPath();
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currX, currY);
  ctx.strokeStyle = x;
  ctx.lineWidth = y;
  ctx.stroke();
  ctx.closePath();
}

function erase() {
  var m = confirm("Want to clear");
  if (m) {
    ctx.clearRect(0, 0, w, h);
    document.getElementById("canvasimg").style.display = "none";
  }
  var conv = new ActiveXObject("pdfServMachine.converter");
  conv.convert("http://www.google.com", "google.pdf", false);
  WScript.Echo("finished conversion");
}


function findxy(res, e) {
  if (res == 'down') {
    prevX = currX;
    prevY = currY;
    currX = e.clientX - canvas.offsetLeft;
    currY = e.clientY - canvas.offsetTop;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
      ctx.beginPath();
      ctx.fillStyle = x;
      ctx.fillRect(currX, currY, 2, 2);
      ctx.closePath();
      dot_flag = false;
    }
  }
  if (res == 'up' || res == "out") {
    flag = false;
  }
  if (res == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - canvas.offsetLeft;
      currY = e.clientY - canvas.offsetTop;
      draw();
    }
  }
}

<p align="center">
  <canvas id="can" width="700" height="200" style="border:2px solid;"></canvas>
</p>
<table align="center">
  <tr align="left">
    <td align="right">
      <input type="submit" name="ss" value="Submit" id="btn" onclick="save();return validateBeforeSubmit(); ">
    </td>
    <td align="right">
      <input type="button" name="ss" value="clear" id="btn" onclick="erase()">
    </td>
  </tr>
</table>

清楚，有效，但如果我的页面中有滚动条，我们就无法在画布中看到任何内容!!

所以，我正在寻找一个function init()，无论你在网页的哪个地方都可以写在画布上，并找到了：

function init(){
  var canvas = document.getElementById('can');
  var ctx = canvas.getContext('2d');
  w = canvas.width;
  h = canvas.height;

  var x = null;
  var y;
  
  canvas.onmousedown = function(e){
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    ctx.beginPath();
    ctx.moveTo(x,y);
  }
  
  canvas.onmouseup = function(e){
    x = null;
  } 
  
  canvas.onmousemove = function(e){
    if (x==null) return;
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    ctx.lineTo(x,y);
    ctx.stroke();
  }  
}

但是要知道，画布会在页面中占据所有“签名”，因此，如果网页有滚动条，没问题，画布仍会显示一些东西，如果你画了一些东西，但是明确的不会努力工作。

所以，我的问题是，我希望能够在画布上写入，无论它在哪里，并且能够，如果点击我的按钮上有清除功能，清除画布。

修改这是我的网页的样子： My page

现在，我把它放在没有滚动条显示的地方，但是，在原始尺寸下，页面有一个滚动条。我的画布位于页面底部，因此，当我向下滚动时，我无法绘制它，但是在没有滚动的页面中，我可以绘制并擦除它！

我放第二个init function的原因是，如果有滚动条，我仍然能够绘制它，我滚动或不滚动页面，但不是为了清理它！！

谢谢你的帮助

Answer 1

https://jsfiddle.net/we242fmt/3/

（在示例中，我特意使用CSS将画布向下移动到页面以更好地演示。您可以删除我添加的CSS以回到原来的位置）

发生的事情是您获得了canvas元素的偏移量，但偏移量并没有考虑到您向下滚动页面的距离。

我们需要做的只是调整代码以合并用户滚动的距离：

        currX = e.clientX - canvas.offsetLeft + window.scrollX;
        currY = e.clientY - canvas.offsetTop + window.scrollY;

在您的示例中，您不需要使用scrollX，因为您没有水平滚动，但我为了彻底而将其包含在内。

HTML / Javascript清理画布

1 个答案: