Javascript 从全新的HTML5画布开始

下面的代码在单击按钮时清除画布

context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears

但是，当我试图在上面重画时，我不想看到的是老画。我想开始在一块新的空白画布上画画

我如何做到这一点

如果您希望查看整个代码

  $(function () {
  var c = document.getElementById("canvas");
  var context = c.getContext("2d");
  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;

  $('#canvas').mousedown(function (e) {
      var mouseX = e.pageX - this.offsetLeft;
      var mouseY = e.pageY - this.offsetTop;

      paint = true;
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
      redraw();
  });


  $('#canvas').mousemove(function (e) {
      if (paint) {
          addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
          redraw();
      }
  });

  $('#canvas').mouseup(function (e) {
      paint = false;
  });

  $('#canvas').mouseleave(function (e) {
      paint = false;
  });

  $('#clear').click(function (e) {
      e.stopPropagation();
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears

  });

  function addClick(x, y, dragging) {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
  }

  function redraw() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

      context.strokeStyle = "#000000";
      context.lineJoin = "round";
      context.lineWidth = 2;

      for (var i = 0; i < clickX.length; i++) {
          context.beginPath();
          if (clickDrag[i] && i) {
              context.moveTo(clickX[i - 1], clickY[i - 1]);
          } else {
              context.moveTo(clickX[i] - 1, clickY[i]);
          }
          context.lineTo(clickX[i], clickY[i]);
          context.closePath();
          context.stroke();
      }
  }

  });

$（函数（）{
var c=document.getElementById（“画布”）；
var context=c.getContext（“2d”）；
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
$（“#画布”）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
油漆=真；
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
重画（）；
});
$（'#canvas'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）；
重画（）；
}
});
$（'#canvas'）.mouseup（函数（e）{
油漆=假；
});
$（'#canvas'）.mouseleave（函数（e）{
油漆=假；
});
$（“#清除”）。单击（函数（e）{
e、 停止传播（）；
context.clearRect（0,0，context.canvas.width，context.canvas.height）；//清除
});
功能添加单击（x、y、拖动）{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
}
函数重画（）{
context.clearRect（0,0，context.canvas.width，context.canvas.height）；//清除画布
context.strokeStyle=“#000000”；
context.lineJoin=“round”；
context.lineWidth=2；
对于（变量i=0；i

您必须清除以下数组

单击X

，

单击Y

和

单击拖动

：

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
clickX = []; // clear mouse "logs"
clickY = [];
clickDrag = [];

---

单击或拖动鼠标时，将调用

addClick

方法，该方法使用鼠标坐标填充数组

clickX

、

clickY

和

clickDrag

。调用

重画

方法时，它会在画布上再次绘制点。因此，清除这些数组将解决您的问题。

请单击“编辑”并将代码从小提琴中复制/粘贴到So问题中？因此，它就像一个图书馆，需要为未来的访问者提供代码，小提琴可能会在一段时间后死去。@Paul Done！添加了完整的代码：）@rps不用担心，伙计。很高兴为您提供帮助我还有一个疑问，假设具有上述创建画布的网页处于打开和活动状态，并且电脑连接到签名板，如果我在该签名板上签名，签名会在该画布上绘制吗？@rps我实际上从未拥有过其中一个，因此我不确定它的接口是什么。。这是一个合法的想法。。必须进行测试，如果它是笔式平板电脑，它会工作吗？？？@rps，如前所述。我没有wacom，所以我没有明确的答案。