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

Question

I am now trying to deeply understand the canvas and JavaScript. Now I am drawing an image on HTML canvas using JavaScript. I can draw the image successfully. But I am having a problem with filling the colour. This is the picture I have drawn using JavaScript and canvas.

This is the JavaScript code.

    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();

Basically, what I am doing is drawing circles from smaller to bigger with the same center. Then draw the line from the same center increasing the degree equally after each line is drawn. Yes, the image is drawn successfully. But there is an issue with what I want to achieve. As you can see, for coloring the circle, I set the line with of circle to ten and set the color for the line. So the whole circle line has only one color. But what I would like to do is I want to set the different color for each section of the circle. I set the section by separating with the lines as follow.

So, what I want to do is, I want to set the different color to section A of circle "1" from section B of circle "1" and so on. In Microsoft Paint software, if we paint a section, if the section is bordered properly, only the bordered area section is painted. So, I would like to do something like that.

Answer 1

You should probably draw different arcs for the different sections by changing the last 2 parameters of the arc method:

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

I made this jsfiddle for you: https://jsfiddle.net/gtato/znxzvjnp/

Answer 2

If you want to set to set the different color to section A of circle "1" from section B of circle "1" and so on, you can use draw arcs next to each other. You have to calculate the angle from and to and make sure these are adjacent.

Here is a small example on how you can draw something like a piechart with random colors:

 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>