如何用 HTML5 画布将一个圆圈分成三个相等的部分？

Posted 2023-03-05

【中文标题】如何用 HTML5 画布将一个圆圈分成三个相等的部分？

【英文标题】：How to divide a circle into three equal parts with HTML5 canvas?

【发布时间】：2012-09-17 20:10:57

【问题描述】：

如上图所示，如何使用 html5 canvas 2D context API 将一个圆分成三等份？

我在尝试this

有人可以提出更好的方法吗？可能使用百分比（或度数）而不是硬编码坐标？

var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');

ctx.fillStyle = "#BD1981";
ctx.beginPath();
ctx.arc(200, 200, 150, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.strokeStyle = "#FFC8B2";
ctx.lineWidth = "2";
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(350, 200);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(100, 300);
ctx.closePath();
ctx.stroke();

【问题讨论】：

应该代表什么“百分比”？

喜欢 33% (100/3) 或 120 度 (360/3)

如果我使用 35% 怎么办？

首先，学习基本的三角学...

顺便说一句，你的线条不会将圆圈分成三个相等的部分！

【参考方案1】：

Here is a function (demo) 允许您指定起点、长度和角度（以度为单位）：

var drawAngledLine = function(x, y, length, angle) 
    var radians = angle / 180 * Math.PI;
    var endX = x + length * Math.cos(radians);
    var endY = y - length * Math.sin(radians);

    ctx.beginPath();
    ctx.moveTo(x, y)
    ctx.lineTo(endX, endY);
    ctx.closePath();
    ctx.stroke();

【参考方案2】：

把它们放在一起（使用@phant0m 的drawAngledLine）：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var RADIUS = 70;

function drawCircle(x, y, r) 
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.stroke();


function drawAngledLine(x, y, length, angle) 
    var radians = angle / 180 * Math.PI;
    var endX = x + length * Math.cos(radians);
    var endY = y - length * Math.sin(radians);
    ctx.beginPath();
    ctx.moveTo(x, y)
    ctx.lineTo(endX, endY);
    ctx.closePath();
    ctx.stroke();


drawCircle(140, 140, RADIUS);
drawAngledLine(140, 140, RADIUS, 1 * (360 / 3));
drawAngledLine(140, 140, RADIUS, 2 * (360 / 3));
drawAngledLine(140, 140, RADIUS, 3 * (360 / 3));

在这里演示：

http://jsfiddle.net/My8eX/

【参考方案3】：

我知道你可能得到了你的答案，但我发现韦恩的 jsfiddle 很有帮助，所以我添加了我的贡献，它可以让你设置你想要将圆圈分成的自定义数量的部分。

http://jsfiddle.net/yorksea/3ef0y22c/2/

（也使用@phant0m 的drawAngledLine）

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var RADIUS = 300;
var num_sections = 19; //set this for number of divisions

function drawCircle(x, y, r) 
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.stroke();


function drawAngledLine(x, y, length, angle) 
  var radians = angle / 180 * Math.PI;
  var endX = x + length * Math.cos(radians);
  var endY = y - length * Math.sin(radians);
  ctx.beginPath();
  ctx.moveTo(x, y)
  ctx.lineTo(endX, endY);
  ctx.closePath();
  ctx.stroke();


//draw circle outline
drawCircle(320, 320, RADIUS);

//loop the number of sections to draw each
for (i = 1; i <= num_sections; i++) 
  drawAngledLine(320, 320, RADIUS, i * (360 / num_sections));

<canvas id="canvas" width="650" height="650"></canvas>