html5 Leinwand enthalten Farbauswahl

Question

Ich habe bereits eine Leinwand, wo Sie frei in es zeichnen konnten. Aber ich habe Probleme, etwas Farbe hinzuzufügen, hängt von der Wahl des Benutzers ab.

ich diese Quelle in Netz gefunden, aber ich weiß nicht, wie es mit meinem Code zu verwalten ->http://intridea.github.io/sketch.js/

Ich mag Farbenwahlen umfassen:

Dies ist mein Code so weit:

$(function() { 
 
    $.each(['#f00', '#ff0', '#0f0'], function() { 
 
     $('#colors_demo .tools a').append("<a href='#displaycake_doodle' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> "); 
 
    }); 
 
    
 
    $(function() { 
 
     var drawObject = $('#displaycake_doodle').sketch(); 
 
     var oldRedraw = drawObject.data('sketch').redraw; 
 
      drawObject.data('sketch').redraw = function() { 
 
      oldRedraw.call(this); 
 
      display(); 
 
     } 
 
     $(".tools a").eq(0).attr("style", "color:#fba557"); 
 
     $(".tools a").click(function() { 
 
      $(".tools a").removeAttr("style"); 
 
      $(this).attr("style", "color:#000"); //default color black, how do i change this here? 
 
      }); 
 
     });

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

 
<canvas id="displaycake_doodle"></canvas> 
 

 
<div class="demo" id="colors_demo"> 
 
<div class="tools"> 
 

 
<a href="#displaycake_doodle" class="btn btn-primary" data-tool="marker"> Marker</a> <!--works fine --> 
 
<a href="#displaycake_doodle" class="btn btn-primary" data-tool="eraser"> Eraser</a> <!-- works fine --> 
 

 
<!-- COLOR PART THAT DOESN'T SHOWS UP AND CREATES AN ERROR --> 
 
<a href="#displaycake_doodle" data-color="#f00" style="width: 10px; background: #f00;"></a> 
 
<a href="#displaycake_doodle" data-color="#ff0" style="width: 10px; background: #ff0;"></a> 
 
<a href="#displaycake_doodle" data-color="#0f0" style="width: 10px; background: #0f0;"></a> 
 

 
    </div> 
 

 
          </div>

ich habe Fehler, wenn ich includ ed diese Farben, Hoffe, du könntest mir helfen. ICH DANKE DIR SEHR!!!

Answer 1

Nachdem ich sketch.js durchgegangen bin. Ich versuche, Ihre Leinwand neu zu erstellen.

$(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"> 
 
    <a href="#colors_sketch" data-download="png" style="float: right; width: 100px;">Download</a> 
 
</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>

hoffe, das hilft