javascript - HTML5 Canvas 删除线条

Question

我对jquery和canvas不熟悉，我想做一个橡皮擦(就像photoshop或paint中的橡皮擦工具)，删除 Canvas 中的一些线条。

Marker - triggers to start draw
Reset - clears the canvas Eraser - erases unnecessary lines/sketch (What i would like to do)

这是到目前为止我使用不同来源的代码，我想包括ERASER

$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<div id="colors_demo" class="tools">
  
</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>

我在网上搜索时遇到困难，因为它只显示重置或撤消希望有人能帮助我。非常感谢!!!!

Answer 1

为什么不使用背景颜色作为橡皮擦工具

下面是一个示例片段:

$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    var color = getBackground($('#colors_sketch'));
    //console.log(color);
    $("#eraser").attr('data-color',color);
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
});

function getBackground(jqueryElement) {
  var color = jqueryElement.css("backgroundColor");
  if(color == "transparent"){
    color = jqueryElement.parent().css("backgroundColor") == "transparent" ? "#fff" : jqueryElement.parent().css("backgroundColor");
    //alert(color)
  }
  return hexc(color);
}

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');

    return color;
}

#colors_sketch {
  border:1px solid black;
  background-color:#999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<div id="colors_demo" class="tools">
  
</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a id="eraser" href='#colors_sketch' data-color=''>Eraser</a>
  <a href="#colors_sketch" data-tool="eraser">Clear</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>