今天小编给大家分享一下如何创建微信小程序颜色渐变点的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创建一个颜色的渐变点。
Tip: 小于最小 stop 的部分会按最小 stop 的 color 来渲染,大于最大 stop 的部分会按最大 stop 的 color 来渲染。
Tip: 需要使用addColorStop()
来指定渐变点,至少要两个。
参数 | 类型 | 定义 |
---|---|---|
stop | Number(0-1) | 表示渐变点在起点和终点中的位置 |
color | Color | 渐变点的颜色 |
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(0.66, 'cyan') grd.addColorStop(0.83, 'blue') grd.addColorStop(1, 'purple')// Fill with gradientctx.setFillStyle(grd) ctx.fillRect(10, 10, 150, 80) ctx.draw()
以上就是“如何创建微信小程序颜色渐变点”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。