html5 linear,html - Draw arc will linear gradient html5 canvas - Stack Overflow

I couldn't see the example that the OP posted (broken link?), but I had a very similar question and none of the answers here helped me.

So, this is what I wanted to do:

And this is how I did it:

var center = { "x": 115, "y": 115 };

var radius = 100;

var quadrants = [

{

"angleStart": Math.PI * -0.5,

"angleEnd": 0,

"x1": center.x,

"y1": center.y - radius,

"x2": center.x + radius,

"y2": center.y,

"colorStops": [

{ "stop": 0, "color": "blue" },

{ "stop": 1, "color": "green" }

]

},

{

"angleStart": 0,

"angleEnd": Math.PI * 0.5,

"x1": center.x + radius,

"y1": center.y,

"x2": center.x,

"y2": center.y + radius,

"colorStops": [

{ "stop": 0, "color": "green" },

{ "stop": 1, "color": "yellow" }

]

},

{

"angleStart": Math.PI * 0.5,

"angleEnd": Math.PI,

"x1": center.x,

"y1": center.y + radius,

"x2": center.x - radius,

"y2": center.y,

"colorStops": [

{ "stop": 0, "color": "yellow" },

{ "stop": 1, "color": "red" }

]

},

{

"angleStart": Math.PI,

"angleEnd": Math.PI * 1.5,

"x1": center.x - radius,

"y1": center.y,

"x2": center.x,

"y2": center.y - radius,

"colorStops": [

{ "stop": 0, "color": "red" },

{ "stop": 1, "color": "black" }

]

}

];

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Draw arc quadrants.

for (var i = 0; i < quadrants.length; ++i) {

var quad = quadrants[i];

var grad = ctx.createLinearGradient(quad.x1, quad.y1, quad.x2, quad.y2);

// Color stops.

for (var j = 0; j < quad.colorStops.length; ++j) {

var cs = quad.colorStops[j];

grad.addColorStop(cs.stop, cs.color);

}

// Draw arc.

ctx.beginPath();

ctx.arc(center.x, center.y, radius, quad.angleStart, quad.angleEnd);

ctx.strokeStyle = grad;

ctx.lineWidth = 30;

ctx.stroke();

}

Your browser does not support the HTML5 canvas tag.

Note: The canvas tag is not supported in Internet

Explorer 8 and earlier versions.

And below is my draft idea before implementing it:

Linear gradient distribution on arc:

***********

*** | ***

** | **

** | **

* _ | *

** /| | \ **

** / | _\| **

* | *

* 4th Quadrant | 1st Quadrant *

* | *

*-------------------|-------------------*

* | *

* 3rd Quadrant | 2nd Quadrant *

* _ | *

** |\ | / **

** \ | |/_ **

* | *

** | **

** | **

*** | ***

***********