如何在點擊事件中更改HTML5畫布的填充顏色？

Question

我正在使用HTML5畫布創建一些形狀。 我頁面上有一些彩色的按鈕。 畫布形狀具有一些默認的填充樣式。 當我單擊彩色按鈕時，我想將形狀的填充樣式更改為相應的顏色。 我創建了一些演示：

    <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();
});

在此處查看更多信息： http : //jsfiddle.net/shafeequemat/sorp8jtv/ ？。 但這不是很好。 有人請幫助我。

Answer 1

您對cakeSide ， cakeSideVert ， cakeTopHalf1和cakeTopHalf2均指向同一上下文對象。 因此，當您調用stroke()它只會繪制最后繪制的形狀（ cakeTopHalf2 ）。

您應該改為在函數中轉換這些變量：

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