如何用圓圈和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