Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Draw a circle in a canvas with several gradient colors

I need to draw a circle in an Android canvas, based on a gradient list of colors. I managed to draw it without the gradient, as a set of arcs each having one of the colors in the list, as presented by the following image.

enter image description here

How can I draw it with an actual gradient? I tried with the following code to apply a shader to the paint:

Shader shader = new LinearGradient(0, 0, circleWidth, circleHeight, colorList, null, Shader.TileMode.MIRROR);
paint.setShader(shader);
canvas.drawCircle(circleWidth / 2, circleHeight / 2, radius, paint);

but the result is as follows.

enter image description here

like image 870
aleGrazioli Avatar asked Jun 09 '16 14:06

aleGrazioli


People also ask

How do you do a gradient color on canvas?

Gradient positions can be anywhere between 0 to 1. To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).

How do I create a radial gradient in canvas HTML?

To create a radial gradient with HTML5 Canvas, we can use the createRadialGradient() method. Radial gradients are defined with two imaginary circles - a starting circle and an ending circle, in which the gradient starts with the start circle and moves towards the end circle.

Can you make gradients in HTML?

There is no special property for this; you simply use the background or background-image property and define your gradient in its value. You can create both linear and radial gradients this way.


1 Answers

I managed to make it using a SweepGradient.

Shader shader = new SweepGradient(circleWidth / 2, circleHeight / 2, colorList, null);
paint.setShader(shader);
canvas.drawCircle(circleWidth / 2, circleHeight / 2, radius, paint);

enter image description here

like image 164
aleGrazioli Avatar answered Nov 15 '22 19:11

aleGrazioli