Shulou(Shulou.com)06/01 Report--

Editor to share with you how to set Canvas gradient, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Canvas- gradient

Gradients can be filled in rectangles, circles, lines, text, etc., and various shapes can define different colors.

There are two different ways to set Canvas gradients:

CreateLinearGradient (x1)-create a line gradient

CreateRadialGradient (x _ journal y _ r _ 1 ~ r _ 1)-create a radial / circular gradient.

When we use a gradient object, we must use two or more stop colors.

The addColorStop () method specifies the color stop, and the parameters are described by coordinates, which can range from 0 to 1.

Using a gradient, set the value of fillStyle or strokeStyle to a gradient, and then draw a shape, such as a rectangle, text, or a line.

Use createLinearGradient ():

Example

Create a linear gradient. Fill the rectangle with a gradient:

_ JavaScript:

Varc=document.getElementById ("myCanvas")

Varctx=c.getContext ("2d")

/ / create a gradient

Vargrd=ctx.createLinearGradient (0je 0je 200jue 0)

Grd.addColorStop (0, "red")

Grd.addColorStop (1, "white")

/ / fill gradient

Ctx.fillStyle=grd

Ctx.fillRect (10, 10, 150, 150, 80)

Use createRadialGradient ():

Example

Create a radial / circular gradient. Fill the rectangle with a gradient:

_ JavaScript:

Varc=document.getElementById ("myCanvas")

Varctx=c.getContext ("2d")

/ / create a gradient

Vargrd=ctx.createRadialGradient (75, 50, 50, 5, 90, 60, 100)

Grd.addColorStop (0, "red")

Grd.addColorStop (1, "white")

/ / fill gradient

Ctx.fillStyle=grd

Ctx.fillRect (10, 10, 150, 150, 80)

The above is all the content of the article "how to set Canvas gradient". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.