Question

我必须使用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>

Answer 1

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

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

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

1 个答案: