如何在单击时更改画布中圆圈的背景颜色？答案

【问题标题】：how to change the background color of a circle in canvas on click?如何在单击时更改画布中圆圈的背景颜色？
【发布时间】：2016-11-06 17:50:42
【问题描述】：

我必须使用 html 中的画布创建一个具有不同背景颜色的圆圈，在它的底部，我想制作一个按钮，在单击它时更改圆圈的背景颜色，然后在单击时更改颜色再说一遍。我该怎么做？

<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid black;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    drawCircle(ctx,false);
    function drawCircle(context,fill){
        context.beginPath();
        context.arc(90, 90, 50, 0, 2 * Math.PI);
        context.closePath();
        context.stroke();
        context.fill();
        context.fillStyle="green";
    }
    $("#c1").click(function(){ drawCircle(ctx,true); });

}); 
</script>

</head>

<body>
<div class="row-fluid">
    <div class="span1 offset3">
        <canvas id="myCanvas" width="200" height="200"></canvas>
    </div>
    <div class="span1">
        <br/><a id="c1" href="#" style="margin-left:70px;">click</a>
    </div>

</div>
</body>
</html>

【问题讨论】：

请出示您尝试过的代码
我真的不知道该怎么做，所以我没有真正做。我知道如何在画布上制作圆圈以及如何为它们添加颜色和东西，但是制作一个可以在单击时在画布中更改其背景颜色的圆圈非常困难。使用 div 更容易，但使用 canvas 则不然：/
你好像不明白这个网站的概念。您在这里没有按需获得免费教程。它仅用于解决特定问题，您需要提供您自己解决问题的证据。至少提供你目前所拥有的代码。
是的，我很抱歉。我已经添加了我使用的代码。我现在可以更改背景颜色，但不能将其更改回原来的颜色

标签： javascript jquery html canvas

【解决方案1】：

您不能神奇地更改任何绘制到画布上的组件的（背景）颜色。

您需要用不同的颜色绘制一个新的圆圈并覆盖之前的圆圈。

【讨论】：