HTML5画布擦除线

Question

I'm not familiar with jquery and canvas, I would like to make an eraser (like the eraser tool in photoshops or paint) , erases some lines in my canvas.

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

Here's the code so far I got using different sources, I would like to include 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> 

I was having difficulty to search online since it just shows reset or undo Hope somebody can help me out. THANK YOU SO MUCH!!!!

Answer 1

Why dont you get around and use the background color as an eraser tool

Below a sample sniipet :

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