2016-11-06 15 views
-1

キャンバスを使用して背景色を変えてサークルを作成する必要があります。その下には、サークルの背景色を変更するボタンをクリックしてクリックしてから色を変更します再び。それ、どうやったら出来るの?クリックしてキャンバス内の円の背景色を変更する方法は?

<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> 
+0

あなたが試したコードを表示してください –

+0

私は本当にそれを行う方法を知っていないので、私は本当にそれをやっていませんでした。私はキャンバスにサークルを作る方法と、色や材料を追加する方法を知っていますが、キャンバスの背景色をクリックで変更できるサークルを作ることは非常に難しいです。 divで簡単ですがキャンバスではありません:/ –

+0

あなたはこのウェブサイトのコンセプトを理解していないようです。あなたはここで無料のチュートリアルを手に入れません。これは特定の問題を解決するためだけに使用され、問題を自分で処理したという証拠を提示する必要があります。あなたが今まで持っているもののコードを少なくとも提供してください。 –

答えて

0

キャンバスに描画されたコンポーネントの(背景)色を魔法のように変更することはできません。

新しい円を別の色で描画し、前の円を上書きする必要があります。

関連する問題