手册
目录
收藏629
分享
阅读91443
更新时间2022-04-11
渐变能用于填充一个矩形，圆，线，文字等。填充色可以不固定位固定的一种颜色。
我们提供了两种颜色渐变的方式：
createLinearGradient(x, y, x1, y1) - 创建一个线性的渐变createCircularGradient(x, y, r) - 创建一个从圆心开始的渐变一旦我们创建了一个渐变对象，我们必须添加两个颜色渐变点。
addColorStop(position, color) 方法用于指定颜色渐变点的位置和颜色，位置必须位于0到1之间。
可以用setFillStyle() 和 setStrokeStyle() 方法设置渐变，然后进行画图描述。
const ctx = wx.createCanvasContext('myCanvas')
// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
const ctx = wx.createCanvasContext('myCanvas')
// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.3万人学习
共29课时
61.9万人学习
共25课时
39.5万人学习
共43课时
71.2万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.7万人学习
