javascript - 计算在 HTML5 canvas 径向进度条中点击的百分比

Question

我创建了一个这样的循环进度条

我可以通过使用 java 脚本发送它来加载一定百分比，但我不知道如何计算用户点击圆圈的黑色/绿色部分时点击的百分比。

如何计算百分比？

请解释你的答案。

Answer 1

这是将点击 Angular 转换为百分比的一种方法:

• 使用 Math.atan2 计算鼠标相对于中心点的 Angular 。

• 将该 Angular 归一化到 0-PI*2 弧度内:(angle+PI*2)%(PI*2)。

• 计算该 Angular 占整圆的百分比:normalizedAngle/(PI*2)。

• 这是你的百分比!

图示:注意0%在圆的3点钟位置

示例代码和演示:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

var isDown = false;
var startX;
var startY;

var cx = 150;
var cy = 150;
var radius = 75;
var PI = Math.PI;
var PI2 = PI * 2;

ctx.lineWidth = 15;
ctx.font = '24px verdana';

draw(50, 50);

function draw(x, y) {

  var dx = x - cx;
  var dy = y - cy;
  var endAngle = (Math.atan2(dy, dx) + PI2) % PI2;
  var pct = parseInt(endAngle / PI2 * 100);

  ctx.clearRect(0, 0, cw, ch);

  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, PI2);
  ctx.closePath();
  ctx.strokeStyle = 'black';
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, endAngle);
  ctx.strokeStyle = 'forestgreen';
  ctx.stroke();

  ctx.fillText(pct + '%', cx - 15, cy + 8);

}



function handleMouseDown(e) {
  e.preventDefault();
  e.stopPropagation();

  mX = parseInt(e.clientX - offsetX);
  mY = parseInt(e.clientY - offsetY);

  draw(mX, mY);

}

$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on the canvas to set a percentage.</h4>
<canvas id="canvas" width=300 height=300></canvas>