如何在点击事件上更改 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>