How to create WeChat Mini Programs Color gradient Point

Today, the editor will share with you the relevant knowledge points about how to create WeChat Mini Programs color gradient points. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

CanvasContext.addColorStop definition

Create a color gradient point.

Tip: parts that are smaller than the minimum stop will be rendered as the color of the minimum stop, and those greater than the maximum stop will be rendered as the color of the maximum stop.

Tip: you need to use addColorStop () to specify gradient points, at least two.

Parameter type definition stopNumber (0-1) represents the position of the gradient point at the beginning and end point colorColor color example const ctx = wx.crateCanvasContext ('myCanvas') / / Create circular gradientconst grd = ctx.createCircularGradient (30,10,120,10) grd.addColorStop (0,' red') grd.addColorStop (0.16,' orange') grd.addColorStop (0.33, 'yellow') grd.addColorStop (0.5,' green') grd.addColorStop 'cyan') grd.addColorStop (0.83,' blue') grd.addColorStop (1,' purple') / / Fill with gradientctx.setFillStyle (grd) ctx.fillRect (10,10,150,80) ctx.draw () above are all the contents of the article "how to create a color gradient point for WeChat Mini Programs" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.