HTML5畫布擦除線

Question

我對jquery和canvas不熟悉，我想制作一個橡皮擦（如photoshop或paint中的橡皮擦工具），擦除畫布中的某些線條。

標記-觸發開始繪制
重置-清除畫布橡皮擦-擦除不必要的線條/素描（我想做的事）

到目前為止，這是我使用不同來源的代碼，我想包括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> 

我很難在線搜索，因為它只顯示reset或undo希望有人可以幫助我。 非常感謝！！！！

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>