Question

我需要绘制7个分区的圆圈。

我已完成此代码：

HTML

<body style="background:#F6A631;">
    <canvas id="wheelcanvas" width="730" height="730"></canvas>  
</body>

JS

var services = ["paragraphs", "paragraphs", "paragraphs", "paragraphs", "paragraphs", "paragraphs", "paragraphs"];

  function serviceCircle() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 360;
      var textRadius = 280;
      var insideRadius = 220;

      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,720,720); // 720 - 360 - 180 (500 - 250)


      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 5;

      ctx.font = 'bold 18px Tahoma';

      for(var i = 0; i < 7; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = "#ffc000";

        ctx.translate(360 + Math.cos(angle + arc / 2) * textRadius, 360 + Math.sin(angle + arc / 2) * textRadius);
        // ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = services[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      } 

      //Arrow
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
      ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.fill();
    }
  }
  draw();

我的结果 - Image 我需要这个。将鼠标悬停在分区上并更改其背景。

不知道如何解决它。

Answer 1

这里有一些伪代码用于突出显示鼠标下的分区...

使用以下方法计算鼠标与中心点的角度：

// mx,my are mouse coordinates, cx,cy are centerpoint coordinates
var angle=Math.atan2(my-cy,mx-cx).

使用以下方法计算从中心点到鼠标的距离：

var distance=Math.sqrt((mx-cx)*(mx-cx)+(my-cy)*(my-cy)).

如果angle介于起始和出发之间分区的结束角度和distance在内半径和外半径之间，然后鼠标在该分区中。

var isInsidePartition1 = 
      angle>partition1StartingAngle &&
      angle<=partition1EndingAngle &&
      distance>=innerRadius &&
      distance<=outerRadius;

现在重绘所有内容（没有突出显示）;

最后，如果鼠标击中＆＃39;一个分区，重新绘制＆＃39; hit＆＃39;以突出显示的颜色分区。

HTML5 / Javascript画布 - 绘制7个分区的圆圈

1 个答案: