问一下大家微信小程序canvas如何把画笔颜色设置成渐变色

Question

 // 创建画板
    this.mycanvas = wx.createCanvasContext("canvas");
    // 设置线的样式
    this.mycanvas.setLineCap("round");
    this.mycanvas.setLineJoin("round");
    // 初始化颜色
    const grd = this.mycanvas.createCircularGradient(75,50,50);
    grd.addColorStop(0, 'red')
    grd.addColorStop(1, 'white')
    this.mycanvas.setStrokeStyle(grd)

按照官方文档写，这是直接在画板上绘制了渐变的圆形

但是我是想要画笔的线条颜色为渐变色，请问一下大家应该怎样实现

Answer 1

题主要的代码如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~

demo.wxml

<canvas style="width: 100%; height: 200px;" canvas-id="firstCanvas"></canvas>

demo.js

Page({
  onReady: function (e) {
    const ctx = wx.createCanvasContext('firstCanvas');
    const grd = ctx.createLinearGradient(0, 0, 250, 0);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'white'); 
    ctx.setStrokeStyle(grd);
    ctx.moveTo(10, 10);
    ctx.lineTo(260, 10);
    ctx.stroke();
    ctx.draw();
  }
})