在 JavaScript 中将颜色填充到 HTML 画布的特定部分，如 Windows Paint

Question

我现在正在尝试深入了解画布和 JavaScript。现在我正在使用 JavaScript 在 HTML 画布上绘制图像。我可以成功绘制图像。但是我在填充颜色时遇到问题。这是我使用 JavaScript 和 canvas 绘制的图片。

这是 JavaScript 代码。

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    //circles
    var center_y = 150;//Y
    var center_x = 150;
    var lineWidth = 10;
    context.lineWidth=lineWidth;

    context.beginPath();
    context.arc(center_x,center_y ,50,0,2*Math.PI);
    context.strokeStyle = "#FF00FF";
    context.stroke();

    context.beginPath();
    context.arc(center_x,center_y ,40,0,2*Math.PI);
    context.strokeStyle = "#990000";
    context.stroke();

    context.beginPath();
    context.arc(center_x,center_y ,30,0,2*Math.PI);
    context.strokeStyle = "#0099CC";
    context.stroke();


    context.lineWidth = 1;
    x1 = 150;
    y1 = 150;
    r =  140;
    theta = 0.5;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 1;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 1.5;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 2;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

    theta = 2.5;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();


    theta = 3;
    context.moveTo(x1, y1);
    context.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
    context.stroke();

基本上，我正在做的是从小到大绘制具有相同中心的圆圈。然后从同一中心画线，每条线画完后，度数相等。是的，图像绘制成功。但是我想要实现的目标存在问题。如您所见，为了给圆圈着色，我将圆圈的线设置为 10 并设置线的颜色。所以整条圆线只有一种颜色。但我想做的是我想为圆圈的每个部分设置不同的颜色。我通过以下几行分隔来设置部分。

所以，我想要做的是，我想为圆圈“1”的部分 B 设置不同的颜色，以此类推。在 Microsoft Paint 软件中，如果我们绘制一个部分，如果该部分的边框正确，则仅绘制边框区域部分。所以，我想做这样的事情。

Answer 1

您可能应该通过更改 arc 方法的最后 2 个参数来为不同的部分绘制不同的弧：

context.arc(cx,cy ,radius, theta_start, theta_end);

我为你制作了这个 jsfiddle：https://jsfiddle.net/gtato/znxzvjnp/

Answer 2

如果要设置为圆“1”的部分 B 和圆“1”的部分 B 设置不同的颜色，依此类推，可以使用彼此相邻的绘制圆弧。您必须计算从和到的角度，并确保它们是相邻的。

下面是一个小例子，说明如何绘制带有随机颜色的饼图：

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

context.lineWidth = 1;
x1 = 150;
y1 = 150;
r = 150;
let prevAngle = 0;
let angle = 0;
let fraction = 0.05;
for (i = 0; i * fraction <= 1; i++) {
  
  context.fillStyle = getRandomColor();

  // Calculate new angle from previous one
  angle = prevAngle + fraction * Math.PI * 2;

  //create a path
  context.beginPath();
  context.moveTo(x1, y1);
  context.arc(x1, y1, r, prevAngle, angle, false);
  context.lineTo(x1, y1);

  //fill it
  context.fill();

  // Create a stroke
  context.strokeStyle = "#000000";
  context.stroke();

  prevAngle = angle;
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

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