鸿蒙画布组件：【OffscreenCanvasRenderingContext2D对象】接口与属性

于 2024-07-21 20:11:41 发布
阅读量929 收藏 10
点赞数 10
分类专栏： 鸿蒙开发 文章标签： harmonyos java 前端 openharmony 鸿蒙 组件 linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82772199/article/details/140592970
版权

OffscreenCanvasRenderingContext2D对象

使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。

说明：

从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

接口

OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: RenderingContextSettings)

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名参数类型必填参数描述
widthnumber是离屏画布的宽度
heightnumber是离屏画布的高度
settings[RenderingContextSettings]否见RenderingContextSettings接口描述。

属性

名称类型描述
[fillStyle]stringnumber10+
[lineWidth]number设置绘制线条的宽度。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[strokeStyle]stringnumber10+
[lineCap]CanvasLineCap指定线端点的样式，可选值为： - ‘butt’：线端点以方形结束。 - ‘round’：线端点以圆形结束。 - ‘square’：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 - 默认值：‘butt’。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[lineJoin]CanvasLineJoin指定线段间相交的交点样式，可选值为： - ‘round’：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。 - ‘bevel’：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。 - ‘miter’：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 - 默认值：‘miter’。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[miterLimit]number设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 - 默认值：10。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[font]string设置文本绘制中的字体样式。 语法：ctx.font=‘font-size font-family’ - font-size(可选)，指定字号和行高，单位只支持px。 - font-family(可选)，指定字体系列。 语法：ctx.font=‘font-style font-weight font-size font-family’ - font-style(可选)，用于指定字体样式，支持如下几种样式：‘normal’,‘italic’。 - font-weight(可选)，用于指定字体的粗细，支持如下几种类型：‘normal’, ‘bold’, ‘bolder’, ‘lighter’, 100, 200, 300, 400, 500, 600, 700, 800, 900。 - font-size(可选)，指定字号和行高，单位支持px、vp。使用时需要添加单位。 - font-family(可选)，指定字体系列，支持如下几种类型：‘sans-serif’, ‘serif’, ‘monospace’。 - 默认值：‘normal normal 14px sans-serif’。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[textAlign]CanvasTextAlign设置文本绘制中的文本对齐方式，可选值为： - ‘left’：文本左对齐。 - ‘right’：文本右对齐。 - ‘center’：文本居中对齐。 - ‘start’：文本对齐界线开始的地方。 - ‘end’：文本对齐界线结束的地方。 > 说明： > ltr布局模式下’start’和’left’一致，rtl布局模式下’start’和’right’一致·。 - 默认值：‘left’。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[textBaseline]CanvasTextBaseline设置文本绘制中的水平对齐方式，可选值为： - ‘alphabetic’：文本基线是标准的字母基线。 - ‘top’：文本基线在文本块的顶部。 - ‘hanging’：文本基线是悬挂基线。 - ‘middle’：文本基线在文本块的中间。 - ‘ideographic’：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。 - ‘bottom’：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 - 默认值：‘alphabetic’。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[globalAlpha]number设置透明度，0.0为完全透明，1.0为完全不透明。
[lineDashOffset]number设置画布的虚线偏移量，精度为float。 - 默认值：0.0。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[globalCompositeOperation]string设置合成操作的方式。类型字段可选值有’source-over’，‘source-atop’，‘source-in’，‘source-out’，‘destination-over’，‘destination-atop’，‘destination-in’，‘destination-out’，‘lighter’，‘copy’，‘xor’。 - 默认值：‘source-over’。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[shadowBlur]number设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 - 默认值：0.0。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[shadowColor]string设置绘制阴影时的阴影颜色。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[shadowOffsetX]number设置绘制阴影时和原有对象的水平偏移值。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[shadowOffsetY]number设置绘制阴影时和原有对象的垂直偏移值。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[imageSmoothingEnabled]boolean用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 - 默认值：true。 从API version 9开始，该接口支持在ArkTS卡片中使用。
[imageSmoothingQuality]ImageSmoothingQualityimageSmoothingEnabled为true时，用于设置图像平滑度。可选值为： - ‘low’：低画质 - ‘medium’：中画质 - ‘high’：高画质。 默认值：low 从API version 9开始，该接口支持在ArkTS卡片中使用。
[direction]CanvasDirection用于设置绘制文字时使用的文字方向。可选值为： - ‘inherit’：继承canvas组件已设定的文本方向 - ‘ltr’：从左往右 - ‘rtl’：从右往左。 默认值：inherit 从API version 9开始，该接口支持在ArkTS卡片中使用。
[filter]string用于设置图像的滤镜。支持的滤镜效果如下： - ‘none’: 无滤镜效果 - ‘blur’：给图像设置高斯模糊 - ‘brightness’：给图片应用一种线性乘法，使其看起来更亮或更暗 - ‘contrast’：调整图像的对比度 - ‘grayscale’：将图像转换为灰度图像 - ‘hue-rotate’：给图像应用色相旋转 - ‘invert’：反转输入图像 - ‘opacity’：转化图像的透明程度 - ‘saturate’：转换图像饱和度 - ‘sepia’：将图像转换为深褐色 默认值：‘none’ 从API version 9开始，该接口支持在ArkTS卡片中使用。

说明： fillStyle、shadowColor与 strokeStyle 中string类型格式为 ‘rgb(255, 255, 255)’，‘rgba(255, 255, 255, 1.0)’，‘#FFFFFF’。

fillStyle

// xxx.ets
@Entry
@Component
struct FillStyleExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.fillStyle = '#0000ff'
          offContext.fillRect(20, 20, 150, 100)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

// xxx.ets
@Entry
@Component
struct FillStyleExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.fillStyle = 0x0000FF
          offContext.fillRect(20, 20, 150, 100)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

lineWidth

// xxx.ets
@Entry
@Component
struct LineWidthExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.lineWidth = 5
          offContext.strokeRect(25, 25, 85, 105)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

strokeStyle

// xxx.ets
@Entry
@Component
struct StrokeStyleExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.lineWidth = 10
          offContext.strokeStyle = '#0000ff'
          offContext.strokeRect(25, 25, 155, 105)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

// xxx.ets
@Entry
@Component
struct StrokeStyleExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.lineWidth = 10
          offContext.strokeStyle = 0x0000ff
          offContext.strokeRect(25, 25, 155, 105)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

lineCap

// xxx.ets
@Entry
@Component
struct LineCapExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.lineWidth = 8
          offContext.beginPath()
          offContext.lineCap = 'round'
          offContext.moveTo(30, 50)
          offContext.lineTo(220, 50)
          offContext.stroke()
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

lineJoin

// xxx.ets
@Entry
@Component
struct LineJoinExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.beginPath()
          offContext.lineWidth = 8
          offContext.lineJoin = 'miter'
          offContext.moveTo(30, 30)
          offContext.lineTo(120, 60)
          offContext.lineTo(30, 110)
          offContext.stroke()
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

miterLimit

// xxx.ets
@Entry
@Component
struct MiterLimit {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.lineWidth = 8
          offContext.lineJoin = 'miter'
          offContext.miterLimit = 3
          offContext.moveTo(30, 30)
          offContext.lineTo(60, 35)
          offContext.lineTo(30, 37)
          offContext.stroke()
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

font

// xxx.ets
@Entry
@Component
struct Fonts {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.font = '30px sans-serif'
          offContext.fillText("Hello World", 20, 60)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

textAlign

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
        let offContext = this.offCanvas.getContext("2d", this.settings)
        offContext.strokeStyle = '#0000ff'
        offContext.moveTo(140, 10)
        offContext.lineTo(140, 160)
        offContext.stroke()

        offContext.font = '18px sans-serif'

        offContext.textAlign = 'start'
        offContext.fillText('textAlign=start', 140, 60)
        offContext.textAlign = 'end'
        offContext.fillText('textAlign=end', 140, 80)
        offContext.textAlign = 'left'
        offContext.fillText('textAlign=left', 140, 100)
        offContext.textAlign = 'center'
        offContext.fillText('textAlign=center',140, 120)
        offContext.textAlign = 'right'
        offContext.fillText('textAlign=right',140, 140)
        let image = this.offCanvas.transferToImageBitmap()
        this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

textBaseline

// xxx.ets
@Entry
@Component
struct TextBaseline {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.strokeStyle = '#0000ff'
          offContext.moveTo(0, 120)
          offContext.lineTo(400, 120)
          offContext.stroke()

          offContext.font = '20px sans-serif'

          offContext.textBaseline = 'top'
          offContext.fillText('Top', 10, 120)
          offContext.textBaseline = 'bottom'
          offContext.fillText('Bottom', 55, 120)
          offContext.textBaseline = 'middle'
          offContext.fillText('Middle', 125, 120)
          offContext.textBaseline = 'alphabetic'
          offContext.fillText('Alphabetic', 195, 120)
          offContext.textBaseline = 'hanging'
          offContext.fillText('Hanging', 295, 120)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

globalAlpha

// xxx.ets
@Entry
@Component
struct GlobalAlpha {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.fillStyle = 'rgb(0,0,255)'
          offContext.fillRect(0, 0, 50, 50)
          offContext.globalAlpha = 0.4
          offContext.fillStyle = 'rgb(0,0,255)'
          offContext.fillRect(50, 50, 50, 50)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

lineDashOffset

// xxx.ets
@Entry
@Component
struct LineDashOffset {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.arc(100, 75, 50, 0, 6.28)
          offContext.setLineDash([10,20])
          offContext.lineDashOffset = 10.0
          offContext.stroke()
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

globalCompositeOperation

名称描述
source-over在现有绘制内容上显示新绘制内容，属于默认值。
source-atop在现有绘制内容顶部显示新绘制内容。
source-in在现有绘制内容中显示新绘制内容。
source-out在现有绘制内容之外显示新绘制内容。
destination-over在新绘制内容上方显示现有绘制内容。
destination-atop在新绘制内容顶部显示现有绘制内容。
destination-in在新绘制内容中显示现有绘制内容。
destination-out在新绘制内容外显示现有绘制内容。
lighter显示新绘制内容和现有绘制内容。
copy显示新绘制内容而忽略现有绘制内容。
xor使用异或操作对新绘制内容与现有绘制内容进行融合。
// xxx.ets
@Entry
@Component
struct GlobalCompositeOperation {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.fillStyle = 'rgb(255,0,0)'
          offContext.fillRect(20, 20, 50, 50)
          offContext.globalCompositeOperation = 'source-over'
          offContext.fillStyle = 'rgb(0,0,255)'
          offContext.fillRect(50, 50, 50, 50)
          offContext.fillStyle = 'rgb(255,0,0)'
          offContext.fillRect(120, 20, 50, 50)
          offContext.globalCompositeOperation = 'destination-over'
          offContext.fillStyle = 'rgb(0,0,255)'
          offContext.fillRect(150, 50, 50, 50)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

shadowBlur

// xxx.ets
@Entry
@Component
struct ShadowBlur {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.shadowBlur = 30
          offContext.shadowColor = 'rgb(0,0,0)'
          offContext.fillStyle = 'rgb(255,0,0)'
          offContext.fillRect(20, 20, 100, 80)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

shadowColor

// xxx.ets
@Entry
@Component
struct ShadowColor {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.shadowBlur = 30
          offContext.shadowColor = 'rgb(0,0,255)'
          offContext.fillStyle = 'rgb(255,0,0)'
          offContext.fillRect(30, 30, 100, 100)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

shadowOffsetX

// xxx.ets
@Entry
@Component
struct ShadowOffsetX {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.shadowBlur = 10
          offContext.shadowOffsetX = 20
          offContext.shadowColor = 'rgb(0,0,0)'
          offContext.fillStyle = 'rgb(255,0,0)'
          offContext.fillRect(20, 20, 100, 80)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

shadowOffsetY

// xxx.ets
@Entry
@Component
struct ShadowOffsetY {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.shadowBlur = 10
          offContext.shadowOffsetY = 20
          offContext.shadowColor = 'rgb(0,0,0)'
          offContext.fillStyle = 'rgb(255,0,0)'
          offContext.fillRect(30, 30, 100, 100)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

imageSmoothingEnabled

// xxx.ets
@Entry
@Component
struct ImageSmoothingEnabled {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.imageSmoothingEnabled = false
          offContext.drawImage(this.img,0,0,400,200)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

鸿蒙系统小能手Mr.Li
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS鸿蒙开发指南:CanvasRenderingContext2D对象
sybh的博客
01-09 746
添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。
HarmonyOS鸿蒙开发指南:Canvas组件 OffscreenCanvasRenderingContext2D对象
sybh的博客
01-09 817
以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。canvas{select{// xxx.jsdata:{el: null,ctx: null,img: null,},onShow(){// 图片成功获取触发方法},change(e){},
鸿蒙画布组件：【CanvasRenderingContext2D对象】 接口与属性
最新发布
2401_82772199的博客
07-19 1106
使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
HTML5 Canvas 属性、定义及方法
weixin_33877092的博客
04-01 208
为什么80%的码农都做不了架构师？>>> ...
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：CanvasRenderingContext2D）
m0_64420071的博客
03-19 1283
ArkTS声明式开发（画布组件：CanvasRenderingContext2D）
CanvasRenderingContext2D（渲染上下文对象）
ACdreamer
03-06 5869
CanvasRenderingContext2D是一个对象，它有很多属性和方法，通过设置它的属性和调用它的方法，我们可以 绘制出优美的图像，获取这个对象很简单：      var canvas = document.getElementById("canvas");      var cxt = canvas.getContext('2d'); 一.Can
HarmonyOSOpenHarmony应用开发ArkTS画布组件CanvasRenderingContext2D对象总述
03-03
在 HarmonyOS 和 OpenHarmony 应用开发中，Canvas 组件是用于图形绘制的重要工具，而 CanvasRenderingContext2D 是一个核心对象，它提供了丰富的接口来实现各种图形的绘制。这个对象允许开发者在 Canvas 上绘制矩形...
HarmonyOS鸿蒙开发指南:Canvas组件 Path2D对象
sybh的博客
01-09 703
先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。创建Path2D，使用多条线段组合图形。
harmonyos2-brushes.js:用于HTML5画布2d上下文的画笔对象
07-01
对象框架，是我看到 Doob 先生的 . 要求 使用./src/brushes.js的唯一要求是拥有支持 HTML5 canvas 2d 上下文的浏览器。 要运行测试，您需要安装 node.js 和 nodeunit。 安装 node.js 取自 的说明。 一定要检查一下！...
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本...
HTML5 Canvas CanvasRenderingContext2D 属性详细解读
Ama_zhe的博客
06-16 1094
HTML5 Canvas API 之 CanvasRenderingContext2D 文档地址 Canvas API CanvasRenderingContext2D 1.属性 canvas 对与给定上下文关联的HTMLCanvasElement对象的只读引用 <canvas id="canvas"></canvas> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：OffscreenCanvasRenderingContext2D）
m0_64420071的博客
03-19 1094
使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等
Canvas API-CanvasRenderingContext2D (下）
yuanhongkun的博客
05-12 326
CanvasRenderingContext2D接口还有很多属性和相关方法，这就不一一介绍了。CanvasRenderingContext2D - Web API 接口参考 | MDN (mozilla.org)
Canvas API-CanvasRenderingContext2D相关学习（上）
yuanhongkun的博客
05-10 616
提供了一个通过JavaScript的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的WebGL API则用于绘制硬件加速的 2D 和 3D 图形。它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。使用 Canvas API 之前，需要在网页里面新建一个<canvas>元素。</
【绘制】HTML5 Canvas 扩展CanvasRenderingContext2D来增加新属性和方法
苏一恒
09-02 664
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 介绍 假如未来某一天，Canvas标准又通过了CanvasRenderingContext2D的新属性和方法，我们该考虑如何让浏览...
2.8.6_通过扩展CanvasRenderingContext2D来绘制虚线
jun_sun_shine的博客
05-02 577
2.8.6_通过扩展CanvasRenderingContext2D来绘制虚线<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通过扩展CanvasRenderingContext2D来绘制虚线</title> <style> body{
HTML5 Canvas CanvasRenderingContext2D 方法详细解读
Ama_zhe的博客
06-17 5244
HTML5 Canvas API 之 CanvasRenderingContext2D 文档地址 Canvas API CanvasRenderingContext2D 1.方法 arc() 绘制圆弧路径。参数（x, y, radius, startAngle, endAngle, anticlockwise) ctx.beginPath(); ctx.arc(100, 100, 40, 0, 2 * Math.PI, false); ctx.stroke(); ctx.lineWidth
Canvas API-CanvasRenderingContext2D用法（中）
yuanhongkun的博客
05-11 401
以下相关绘制方法。创建一个沿着参数坐标指定的线的线性渐变。该方法返回一个线性对象。想要应用这个渐变，需要把这个返回值赋值给fillStyle或者。方法需要指定四个参数，分别表示渐变线段的开始和结束点。参数：x0：起点的x轴坐标。y0：起点的y轴坐标。x1：终点的x轴坐标。y1：终点的y轴坐标。以上代码，使用方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。如下图。创建一个沿着参数坐标指定的线的放射性性渐变。
Java图形处理：Graphics2D对象实战
面向对象设计思想在Graphics2D的使用中也有体现，对象的属性和方法结合，使得图形元素的管理更为有序和灵活。例如，可以创建一个Image对象表示图像资源，然后通过Graphics2D的drawImage()方法将其绘制到画布上。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值