HTML5 Линии стирания холста

Question

Я не знаком с jquery и canvas, я хотел бы сделать ластик (например, инструмент ластик в фотошопах или краску), стирает несколько строк на моем холсте.

Маркер - триггеры, чтобы начать рисовать
Сброс - очищает холст Ластик - стирает ненужные строки/эскиз (Что я хотел бы сделать)

Вот код до сих пор я получил, используя разные источники, я хотел бы включить ластик

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

Почему бы вам не обойти и использовать цвет фона в качестве ластика

Ниже образца 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>