如何用圆圈和onclick()函数改变页面中圆圈的背景颜色？

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

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

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

如何用圆圈和onclick()函数改变页面中圆圈的背景颜色？

问题描述

1 个解决方案

解决方案1
-1 2016-11-06 09:37:28

如何用圆圈和onclick()函数改变页面中圆圈的背景颜色？

问题描述

1 个解决方案

解决方案1 -1 2016-11-06 09:37:28

解决方案1
-1 2016-11-06 09:37:28