如何在點擊時更改畫布中圓圈的背景顏色？

-1

我必須在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>

來源

2016-11-06 Mohammad Khawar

請出示你已經嘗試 –

我真的不知道該怎麼辦，所以我並沒有真正做到這一點的代碼。我知道如何在畫布上製作圓圈，以及如何爲它們添加顏色和材質，但製作一個可以在點擊時更改其畫布背景顏色的圓圈非常困難。它更容易與div但不是與畫布：/ –

它看起來像你不明白這個網站的概念。你不需要在這裏獲得免費的教程。它僅用於解決特定問題，並且您需要提供自己處理問題的證據。至少要提供你到目前爲止的代碼。 –

您不能奇蹟般地更改繪製到畫布的任何組件的（背景）顏色。

您需要繪製具有不同顏色的新圈子，並覆蓋上一個循環。

來源

2016-11-06 09:37:28

如何在點擊時更改畫布中圓圈的背景顏色？

回答

相關問題