Javascript 如何使用html5在单击相应链接时用颜色填充圆圈_Javascript_Jquery_Html_Html5 Canvas

Javascript 如何使用html5在单击相应链接时用颜色填充圆圈

javascript jquery html html5-canvas

Javascript 如何使用html5在单击相应链接时用颜色填充圆圈,javascript,jquery,html,html5-canvas,Javascript,Jquery,Html,Html5 Canvas,我试过这么多代码。我有两个圆圈，旁边有一个链接，我需要给相应链接的圆圈上色。提出一些解决方案 <body> <div class="row-fluid"> <div class="span1 offset3"> <canvas id="myCanvas" width="100" height="100"></canvas> </div> <

我试过这么多代码。我有两个圆圈，旁边有一个链接，我需要给相应链接的圆圈上色。提出一些解决方案

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






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（）；
函数（）{
//onclick函数，该函数将更改相应的ind圆的颜色
}

为每个函数使用此代码脚本标记

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


var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=70；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='blue'；
context.fill（）；
context.lineWidth=5；
context.strokeStyle='#003300'；
stroke（）；

单击html链接时如何填充画布圆圈

这是一个灵活的函数，它可以绘制一个圆，也可以选择填充该圆：

    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调用fill=true的drawCircle函数（圆已填充）

下面是代码和小提琴：


正文{背景色：象牙色；填充：20px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var canvas1=document.getElementById（“myCanvas1”）；
var ctx1=canvas1.getContext（“2d”）；
//画有笔划但没有填充的圆
画圈（ctx，假）；
画圈（ctx1，假）；
函数drawCircle（上下文、填充）{
context.beginPath（）；
弧（55,30,20,0,2*Math.PI）；
closePath（）；
stroke（）；
如果（填写）{
context.fill（）
}
}
//单击后填充圆圈
$（“#c1”）。单击（函数（）{drawCircle（ctx，true）；}）；
$（“#c2”）。单击（函数（）{drawCircle（ctx1，true）；}）；
}); // end$（函数（）{}）；

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

<!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>