html5畫布包含顏色選擇

Question

我已經制作了一個畫布，您可以在其中自由繪製畫布。 但是我很難添加一些顏色，取決於用戶的選擇。

我發現這個淨源，但我不知道怎麼跟我的代碼進行管理 - >http://intridea.github.io/sketch.js/

我想包括顏色可供選擇：

這是我到目前爲止的代碼：

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

我有錯誤，當我includ編輯這些顏色， 希望你能幫助我。非常感謝！！！

Answer 1

通過sketch.js後，我試圖重新創建您的畫布。

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

希望這有助於