HarmonyOS Canvas颜色是否支持径向渐变？

Question

需要回一个彩色圆环图

Answer 1

CanvasGradient控制渐变色的一个方向，可通通过使用createLinearGradient创建一个线性渐变色，通过四个参数控制渐变色的方向。

如下示例可以实现一个从下到上的线性渐变。

参考demo:

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#ffff00')
  .onReady(() => {
    let grad = this.context.createLinearGradient(200, 400, 200, 0)
    grad.addColorStop(0.6, '#ff0000')
    grad.addColorStop(1, '#ffeeee')
    this.context.fillStyle = grad
    this.context.fillRect(0, 0, 400, 300)
  })

参考连接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5\#createlineargradient