如何用html5點擊相應鏈接時用顏色填充圓圈

我已經嘗試了這麼多的代碼。我有兩個帶有鏈接的圓圈，我需要爲相應鏈接的onclick圈起顏色。提出了一些解決方案如何用html5點擊相應鏈接時用顏色填充圓圈

<body> 
    <div class="row-fluid"> 
     <div class="span1 offset3"> 
      <canvas id="myCanvas" width="100" height="100"></canvas> 
     </div> 
     <div class="span1"> 
      <br/><a href="#" onclick="function();">Hello</a> 
     </div> 
     <div class="span1"> 
      <canvas id="myCanvas1" width="100" height="100"></canvas> 
     </div> 
     <div class="span1"> 
      <br/><a href="#" onclick="function();">Hi</a> 
     </div> 
    </div> 
    <script> 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(55, 30, 20, 0, 2 * Math.PI); 
     ctx.stroke(); 

     var c = document.getElementById("myCanvas1"); 
     var ctx = c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(55, 30, 20, 0, 2 * Math.PI); 
     ctx.stroke(); 

     function() { 
      //onclick function which will change the color of the correspondind circle 
     } 
    </script> 
</body>

來源

2013-08-29 Rohini

使用此代碼的腳本標籤爲每個功能

<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 70; 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'blue'; 
    context.fill(); 
    context.lineWidth = 5; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 
</script>

來源

2013-08-29 07:02:49 kondapaka

這不起作用！ – Rohini

如何填寫畫布圈時的HTML鏈接被點擊

enter image description here

這裏一個靈活的功能，繪製一個圓圈，並可選擇填充該圓圈：

function drawCircle(context,fill){ 
     context.beginPath(); 
     context.arc(55, 30, 20, 0, 2 * Math.PI); 
     context.closePath(); 
     context.stroke(); 
     if(fill){ 
      context.fill() 
     } 
    }

jquery可以監聽點擊您的錨點。

然後用jQuery的填充調用畫圓函數= TRUE（圈子充滿）

// fill the circle on click 
    $("#c1").click(function(){ drawCircle(ctx,true); }); 
    $("#c2").click(function(){ drawCircle(ctx1,true); });

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/8LGPB/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:20px; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("myCanvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvas1=document.getElementById("myCanvas1"); 
    var ctx1=canvas1.getContext("2d"); 

    // draw stroked but not filled circles 
    drawCircle(ctx,false); 
    drawCircle(ctx1,false); 

    function drawCircle(context,fill){ 
     context.beginPath(); 
     context.arc(55, 30, 20, 0, 2 * Math.PI); 
     context.closePath(); 
     context.stroke(); 
     if(fill){ 
      context.fill() 
     } 
    } 

    // fill the circle on click 
    $("#c1").click(function(){ drawCircle(ctx,true); }); 
    $("#c2").click(function(){ drawCircle(ctx1,true); }); 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
<div class="row-fluid"> 
    <div class="span1 offset3"> 
     <canvas id="myCanvas" width="100" height="100"></canvas> 
    </div> 
    <div class="span1"> 
     <br/><a id="c1" href="#">Hello</a> 
    </div> 
    <div class="span1"> 
     <canvas id="myCanvas1" width="100" height="100"></canvas> 
    </div> 
    <div class="span1"> 
     <br/><a id="c2" href="#">Hi</a> 
    </div> 
</div> 
</body> 
</html>

來源

2013-08-29 19:19:34 markE

如何用html5點擊相應鏈接時用顏色填充圓圈

回答

相關問題