如何在点击事件中更改HTML5画布的填充颜色？

Question

I was creating some shapes using HTML5 canvas. I have some colored buttons in the page. The canvas shapes have some default fill style. When I click on the colored buttons I want to change the fill style of the shapes to the corresponding color. I created some demo:

    <div class="container side_color">
       <h4>Side Color</h4>
       <span class="btn-bg" data-bg-color="#ffa763"></span>
       <span class="btn-bg" data-bg-color="#612a0c"></span>
       <span class="btn-bg" data-bg-color="#190a01"></span>
       <span class="btn-bg" data-bg-color="#ab0e2f"></span>
       <span class="btn-bg" data-bg-color="#ff1818"></span>
       <span class="btn-bg" data-bg-color="#c06248"></span>
   </div>
   <div class="container top_color">
      <h4>Top Color</h4>
       <span class="btn-bg" data-bg-color="#ffa763"></span>
       <span class="btn-bg" data-bg-color="#612a0c"></span>
       <span class="btn-bg" data-bg-color="#190a01"></span>
       <span class="btn-bg" data-bg-color="#ab0e2f"></span>
       <span class="btn-bg" data-bg-color="#ff1818"></span>
       <span class="btn-bg" data-bg-color="#c06248"></span>
   </div>

   <div style="clear:both;"></div>

   <div class="container">
       <canvas id="cake">

       </canvas>
   </div> 

$('.btn-bg').each(function () {
    $(this).css("background", $(this).data('bg-color'));
});

var cakeCanvas = $('#cake')[0];

var cakeSide = cakeCanvas.getContext('2d');
cakeSide.beginPath();
cakeSide.moveTo(50, 50);
cakeSide.quadraticCurveTo(150, 70, 250, 50);
cakeSide.lineWidth = 2;
cakeSide.fillStyle = '#CCC';
cakeSide.fill();

var cakeSideVert = cakeCanvas.getContext('2d');
cakeSideVert.beginPath();
cakeSideVert.rect(50, 30, 200, 20);
cakeSideVert.fillStyle = "#CCC";
cakeSideVert.fill();

var cakeTopHalf1 = cakeCanvas.getContext('2d');
cakeTopHalf1.beginPath();
cakeTopHalf1.moveTo(50, 30);
cakeTopHalf1.quadraticCurveTo(150, 20, 250, 30);
cakeTopHalf1.fillStyle = "#b4b4b4";
cakeTopHalf1.fill();

var cakeTopHalf2 = cakeCanvas.getContext('2d');
cakeTopHalf2.beginPath();
cakeTopHalf2.moveTo(50, 30);
cakeTopHalf2.quadraticCurveTo(150, 50, 250, 30);
cakeTopHalf2.fillStyle = "#b4b4b4";
cakeTopHalf2.fill();

$('.side_color .btn-bg').click(function(){
    //console.log('side' + $(this).data('bg-color'));
    var fillSide = $(this).data('bg-color');
    cakeSide.fillStyle = fillSide;
    cakeSide.fill();
    cakeSideVert.fillStyle = fillSide;
    cakeSideVert.fill();
});
$('.top_color .btn-bg').click(function(){
    //console.log('top' + $(this).data('bg-color'));
    var fillTop = $(this).data('bg-color');
    cakeTopHalf1.fillStyle = fillTop;
    cakeTopHalf1.fill();
    cakeTopHalf2.fillStyle = fillTop;
    cakeTopHalf2.fill();
});

See more here: http://jsfiddle.net/shafeequemat/sorp8jtv/ ?. But it is not working good. Some one please help me.

Answer 1

Your references to cakeSide , cakeSideVert , cakeTopHalf1 and cakeTopHalf2 are all pointing to the same context object. So when you call stroke() it will only draw the last shape drawn ( cakeTopHalf2 ).

You should instead transform those variables in functions :

 $('.btn-bg').each(function () { $(this).css("background", $(this).data('bg-color')); }); var cakeCanvas = $('#cake')[0]; var context = cakeCanvas.getContext('2d'); function cakeSide(color){ context.beginPath(); context.moveTo(50, 50); context.quadraticCurveTo(150, 70, 250, 50); context.lineWidth = 2; context.fillStyle = color || '#CCC'; context.fill(); } function cakeSideVert(color){ context.beginPath(); context.rect(50, 30, 200, 20); context.fillStyle = color || "#CCC"; context.fill(); } function cakeTopHalf1(color){ context.beginPath(); context.moveTo(50, 30); context.quadraticCurveTo(150, 20, 250, 30); context.fillStyle = color || "#b4b4b4"; context.fill(); } function cakeTopHalf2(color){ context.beginPath(); context.moveTo(50, 30); context.quadraticCurveTo(150, 50, 250, 30); context.fillStyle = color || "#b4b4b4"; context.fill(); } cakeSide();cakeSideVert();cakeTopHalf1();cakeTopHalf2(); $('.side_color .btn-bg').click(function(){ //console.log('side' + $(this).data('bg-color')); var fillSide = $(this).data('bg-color'); cakeSide(fillSide); cakeSideVert(fillSide); }); $('.top_color .btn-bg').click(function(){ //console.log('top' + $(this).data('bg-color')); var fillTop = $(this).data('bg-color'); cakeTopHalf1(fillTop); cakeTopHalf2(fillTop); }); 

 @charset "utf-8"; body { margin: 0px; padding: 0px; } .container{ width: 800px; margin: 0 auto; padding: 30px 0px; } .btn-bg{ display: inline-block; width: 30px; height: 30px; border: 1px solid #000; margin-right: 10px; } #cake{ width: 500px; height: 400px; border: 3px solid #333; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container side_color"> <h4>Side Color</h4> <span class="btn-bg" data-bg-color="#ffa763"></span> <span class="btn-bg" data-bg-color="#612a0c"></span> <span class="btn-bg" data-bg-color="#190a01"></span> <span class="btn-bg" data-bg-color="#ab0e2f"></span> <span class="btn-bg" data-bg-color="#ff1818"></span> <span class="btn-bg" data-bg-color="#c06248"></span> </div> <div class="container top_color"> <h4>Top Color</h4> <span class="btn-bg" data-bg-color="#ffa763"></span> <span class="btn-bg" data-bg-color="#612a0c"></span> <span class="btn-bg" data-bg-color="#190a01"></span> <span class="btn-bg" data-bg-color="#ab0e2f"></span> <span class="btn-bg" data-bg-color="#ff1818"></span> <span class="btn-bg" data-bg-color="#c06248"></span> </div> <div style="clear:both;"></div> <div class="container"> <canvas id="cake"> </canvas> </div>