html canvas 未清除

Question

我在这里支了一支笔 http://codepen.io/prantikv/pen/GgNNwQ?editors=101

我正在使用 mosuedown 方法，然后使用事件来绘制线条，如下所示：

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);
 });

最后一个函数应该清除 canvas。它确实清除了它，但随后线条形成了先前绘制的 canvas 重新出现。

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

请推荐

Answer 1

你必须每次都开始一个新的路径，否则 canvas 仍然会 "remember" 前面的行，因为它会认为它们都是相同的路径。

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

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);
    };

html canvas 未清除

html canvas not clearing

html

javascript

canvas