HarmonyOS 一张图片怎么叠加一层颜色渐变效果？

Question

this.contextCanvas.imageSmoothingEnabled = false
this.contextCanvas.drawImage( this.img,0,0,400,100)
let grad = this.contextCanvas.createLinearGradient(0,0, 400,100)
grad.addColorStop(0.0, '#00000000')
grad.addColorStop(1.0, '#00ff00')
this.contextCanvas.fillStyle = grad
this.contextCanvas.fillRect(0, 0, 400,100)

这段代码可以设计渐变叠加，但是渐变不能设置方向，只能从左上角到右下角渐变。

Answer 1

createLinearGradient可以通过修改起始点（x0， y0）的位置来调整角度，但是没有linearGradient设置的方便

import { resourceManager } from '@kit.LocalizationKit'
import { image } from '@kit.ImageKit'

@Entry
@Component
export struct GetImageData {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  async drawImage() {
    const resourceMgr: resourceManager.ResourceManager = getContext(this).resourceManager
    const fileData: Uint8Array = await resourceMgr.getMediaContent($r('app.media.app_icon'))
    const buffer = fileData.buffer
    const imageSource: image.ImageSource = image.createImageSource(buffer)
    const pixelMap: image.PixelMap = await imageSource.createPixelMap()
    pixelMap.getImageInfo().then((info) => {
      //设置图片
      this.context.drawImage(pixelMap, 0, 0, 100, 100, 0, 0, 100, 100)
      //设置渐变
      let grad = this.context.createLinearGradient(0,100, 100,100)
      grad.addColorStop(0.0, '#ff0000')
      grad.addColorStop(0.6, '#ffffff')
      grad.addColorStop(1.0, '#00ff00')
      this.context.fillStyle = grad
      this.context.fillRect(0, 0, 100, 100)

    })
  }
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Pink)
        .onReady(() => {
          this.drawImage()
        })
    }
    .width('100%')
    .height('100%')

  }
}

也可以使用linearGradient属性添加背景色，文档可参考【https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-gradient-color-V5\#lineargradient】

代码如下：

Stack(){
  Image($r('app.media.media_full_screen_preview1'))
    .width(100)
    .height(100)
  Row(){

  }
  .width(100)
  .height(100)
  .opacity(0.8)
  .linearGradient({
    angle: 90,
    colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
  })
}