HTML画布无法清空

Question

我已经在这里设置了一个笔 http://codepen.io/prantikv/pen/GgNNwQ?editors=101 我正在使用mousedown方法，然后使用事件来画出线条，代码如下：

var signTouch=false;
var penWidth=2;
var el = document.getElementById('signPad');
var jqEl = jQuery('#signPad')
var ctx = el.getContext('2d');
ctx.lineWidth = penWidth;
ctx.canvas.width=window.innerWidth;
var isDrawing;


el.onmousedown = function(e) {
  signTouch=true;
  isDrawing = true;
  ctx.lineWidth = penWidth;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
};

el.onmousemove = function(e) {
  if (isDrawing) {
  console.log(e);
    ctx.lineTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    ctx.stroke();
  }
};

el.onmouseup = function() {
  isDrawing = false;
};


$(document).on('pageshow', '#index' ,function () {
 $("#popupCloseRight").popup( "open" );

});


$("#nextchk").click(function(){  
       ctx.clearRect(0,0,el.width,el.height);
 });

最后一个函数应该清除画布。它确实清除了，但之前绘制的线条会重新出现。

我没有使用任何数组来存储路径，但我对 e.clickX 的基本知识缺失一些，它是一个数组吗？

请给予建议。

- krv

Answer 1

每次你必须开始一个新的路径，否则画布仍然会“记住”之前的线条，因为它将认为它们都是同一条路径。

el.onmousedown = function(e) {
    ctx.beginPath();
    // Enable drawing
};

var signTouch = false;
var penWidth = 2;

var el = document.getElementById('signPad');
var jqEl = jQuery('#signPad')
var ctx = el.getContext('2d');
ctx.lineWidth = penWidth;
ctx.canvas.width = window.innerWidth;
var isDrawing;

el.onmousedown = function(e) {
  ctx.beginPath();
  signTouch = true;
  isDrawing = true;
  ctx.lineWidth = penWidth;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
};

el.onmousemove = function(e) {
  if (isDrawing) {
    console.log(e);
    ctx.lineTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    ctx.stroke();
  }
};

el.onmouseup = function() {
  isDrawing = false;
};

$("#mypanel a").click(function() {
  if ($(this).index() == 3) {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    $("#mypanel").panel("close");
  }
});

$("#mypanel").on("panelclose", function(event, ui) {
  console.log($("#slider").val());
  penWidth = $("#slider").val();
});

$("#nextchk").click(function() {
  ctx.clearRect(0, 0, el.width, el.height);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

<div id="index" data-role="page" class="loading modal">

  <div data-role="header">
    <!-- <a href="#" id="refBtn" data-icon="refresh" class="ui-btn-left">Reset</a> -->
    <a href="#mypanel" id="#" data-icon="bars" class="ui-btn-left">Menu</a>
    <h1>demo</h1>
    <a href="#" id="nextchk" data-icon="arrow-r" class="ui-btn-right">Next</a>
  </div>
  <!-- /header -->

  <div data-role="content">
    <canvas id="signPad" width="600" height="300"></canvas>


    <div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px">
      <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
      <p>demo</p>
    </div>

  </div>
  <!-- /content -->

  <div data-role="panel" id="mypanel" data-position="left" data-display="overlay">
    <label for="slider">size:</label>
    <input type="range" name="slider" id="slider" value="5" min="0" max="10" />
    <a href="#" data-rel="close" data-role="button">Set</a> 
    <a href="#" data-role="button">Link button</a> 
  </div>
  <!-- /panel -->

</div>
<!-- /content -->
<!-- /page -->

- Oriol

Answer 2

你从来没有创建过 ctx.beginPath(); 所以它会一直保存你的原始绘图。

 el.onmousedown = function(e) {
      signTouch=true;
      isDrawing = true;
      ctx.beginPath();
      ctx.lineWidth = penWidth;
      ctx.lineJoin = ctx.lineCap = 'round';
      ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    };

- cport1

---

啊，@Oriol赢了我 :) - cport1