OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)

素年锦时静待君丶
发布于 2023-4-18 16:42
浏览
0收藏

版本:v3.2 Release

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

绘制弧线路径。

参数:

参数

类型

必填

默认值

描述

x

number

0

弧线圆心的x坐标值。

y

number

0

弧线圆心的y坐标值。

radius

number

0

弧线的圆半径。

startAngle

number

0

弧线的起始弧度。

endAngle

number

0

弧线的终止弧度。

counterclockwise

boolean

false

是否逆时针绘制圆弧。

示例:

// xxx.ets
@Entry
@Component
struct Arc {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.beginPath()
          this.offContext.arc(100, 75, 50, 0, 6.28)
          this.offContext.stroke()
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

依据圆弧经过的点和圆弧半径创建圆弧路径。

参数:

参数

类型

必填

默认值

描述

x1

number

0

圆弧经过的第一个点的x坐标值。

y1

number

0

圆弧经过的第一个点的y坐标值。

x2

number

0

圆弧经过的第二个点的x坐标值。

y2

number

0

圆弧经过的第二个点的y坐标值。

radius

number

0

圆弧的圆半径值。

示例:

// xxx.ets
@Entry
@Component
struct ArcTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.moveTo(100, 20)
          this.offContext.arcTo(150, 20, 150, 70, 50)
          this.offContext.stroke()
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

ellipse

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

在规定的矩形区域绘制一个椭圆。

参数:

参数

类型

必填

默认值

说明

x

number

0

椭圆圆心的x轴坐标。

y

number

0

椭圆圆心的y轴坐标。

radiusX

number

0

椭圆x轴的半径长度。

radiusY

number

0

椭圆y轴的半径长度。

rotation

number

0

椭圆的旋转角度,单位为弧度。

startAngle

number

0

椭圆绘制的起始点角度,以弧度表示。

endAngle

number

0

椭圆绘制的结束点角度,以弧度表示。

counterclockwise

boolean

false

是否以逆时针方向绘制椭圆。

true:逆时针方向绘制椭圆。

false:顺时针方向绘制椭圆。

示例:

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.beginPath()
          this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
          this.offContext.stroke()
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

rect

rect(x: number, y: number, w: number, h: number): void

创建矩形路径。

参数:

参数

类型

必填

默认值

描述

x

number

0

指定矩形的左上角x坐标值。

y

number

0

指定矩形的左上角y坐标值。

w

number

0

指定矩形的宽度。

h

number

0

指定矩形的高度。

示例:

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
          this.offContext.stroke()
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

fill

fill(fillRule?: CanvasFillRule): void

对封闭路径进行填充。

参数:

参数

类型

必填

默认值

描述

fillRule

CanvasFillRule

“nonzero”

指定要填充对象的规则。

可选参数为:“nonzero”, “evenodd”。

// xxx.ets
@Entry
@Component
struct Fill {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
          this.offContext.fill()
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

fill(path: Path2D, fillRule?: CanvasFillRule): void

对封闭路径进行填充。

参数:

参数

类型

必填

默认值

描述

path

Path2D

Path2D填充路径。

fillRule

CanvasFillRule

“nonzero”

指定要填充对象的规则。

可选参数为:“nonzero”, “evenodd”。

示例:

// xxx.ets
@Entry
@Component
struct Fill {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let region = new Path2D()
          region.moveTo(30, 90)
          region.lineTo(110, 20)
          region.lineTo(240, 130)
          region.lineTo(60, 130)
          region.lineTo(190, 20)
          region.lineTo(270, 90)
          region.closePath()
          // Fill path
          this.offContext.fillStyle = '#00ff00'
          this.offContext.fill(region, "evenodd")
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

clip

clip(fillRule?: CanvasFillRule): void

设置当前路径为剪切路径。

参数:

参数

类型

必填

默认值

描述

fillRule

CanvasFillRule

“nonzero”

指定要剪切对象的规则。

可选参数为:“nonzero”, “evenodd”。

示例:

// xxx.ets
@Entry
@Component
struct Clip {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.rect(0, 0, 100, 200)
          this.offContext.stroke()
          this.offContext.clip()
          this.offContext.fillStyle = "rgb(255,0,0)"
          this.offContext.fillRect(0, 0, 200, 200)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

clip(path:Path2D, fillRule?: CanvasFillRule): void

设置封闭路径为剪切路径。

参数:

参数

类型

必填

默认值

描述

path

Path2D

Path2D剪切路径。

fillRule

CanvasFillRule

“nonzero”

指定要剪切对象的规则。

可选参数为:“nonzero”, “evenodd”。

示例:

// xxx.ets
@Entry
@Component
struct Clip {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let region = new Path2D()
          region.moveTo(30, 90)
          region.lineTo(110, 20)
          region.lineTo(240, 130)
          region.lineTo(60, 130)
          region.lineTo(190, 20)
          region.lineTo(270, 90)
          region.closePath()
          this.offContext.clip(region,"evenodd")
          this.offContext.fillStyle = "rgb(0,255,0)"
          this.offContext.fillRect(0, 0, 600, 600)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

filter

filter(filter: string): void

为Canvas图形设置各类滤镜效果。该接口为空接口。

参数:

参数

类型

必填

默认值

说明

filter

string

-

接受各类滤镜效果的函数。

getTransform

getTransform(): Matrix2D

获取当前被应用到上下文的转换矩阵。该接口为空接口。

resetTransform

resetTransform(): void

使用单位矩阵重新设置当前变形。该接口为空接口。

direction

direction(direction: CanvasDirection): void

绘制文本时,描述当前文本方向的属性。该接口为空接口。

rotate

rotate(angle: number): void

针对当前坐标轴进行顺时针旋转。

参数:

参数

类型

必填

默认值

描述

angle

number

0

设置顺时针旋转的弧度值,可以通过Math.PI / 180将角度转换为弧度值。

示例:

// xxx.ets
@Entry
@Component
struct Rotate {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.rotate(45 * Math.PI / 180)
          this.offContext.fillRect(70, 20, 50, 50)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

scale

scale(x: number, y: number): void

设置canvas画布的缩放变换属性,后续的绘制操作将按照缩放比例进行缩放。

参数:

参数

类型

必填

默认值

描述

x

number

0

设置水平方向的缩放值。

y

number

0

设置垂直方向的缩放值。

示例:

// xxx.ets
@Entry
@Component
struct Scale {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.lineWidth = 3
          this.offContext.strokeRect(30, 30, 50, 50)
          this.offContext.scale(2, 2) // Scale to 200%
          this.offContext.strokeRect(30, 30, 50, 50)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

transform

transform(a: number, b: number, c: number, d: number, e: number, f: number): void

transform方法对应一个变换矩阵,想对一个图形进行变化的时候,只要设置此变换矩阵相应的参数,对图形的各个定点的坐标分别乘以这个矩阵,就能得到新的定点的坐标。矩阵变换效果可叠加。

说明:

 变换后的坐标计算方式(x和y为变换前坐标,x’和y’为变换后坐标):

  • x’ = scaleX * x + skewY * y + translateX
  • y’ = skewX * x + scaleY * y + translateY

参数:

参数

类型

必填

默认值

描述

a

number

0

scaleX: 指定水平缩放值。

b

number

0

skewX: 指定水平倾斜值。

c

number

0

skewY: 指定垂直倾斜值。

d

number

0

scaleY: 指定垂直缩放值。

e

number

0

translateX: 指定水平移动值。

f

number

0

translateY: 指定垂直移动值。

示例:

// xxx.ets
@Entry
@Component
struct Transform {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.fillStyle = 'rgb(0,0,0)'
          this.offContext.fillRect(0, 0, 100, 100)
          this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
          this.offContext.fillStyle = 'rgb(255,0,0)'
          this.offContext.fillRect(0, 0, 100, 100)
          this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
          this.offContext.fillStyle = 'rgb(0,0,255)'
          this.offContext.fillRect(0, 0, 100, 100)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

setTransform

setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void

setTransform方法使用的参数和transform()方法相同,但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。

参数:

参数

类型

必填

默认值

描述

a

number

0

scaleX: 指定水平缩放值。

b

number

0

skewX: 指定水平倾斜值。

c

number

0

skewY: 指定垂直倾斜值。

d

number

0

scaleY: 指定垂直缩放值。

e

number

0

translateX: 指定水平移动值。

f

number

0

translateY: 指定垂直移动值。

示例:

// xxx.ets
@Entry
@Component
struct SetTransform {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.fillStyle = 'rgb(255,0,0)'
          this.offContext.fillRect(0, 0, 100, 100)
          this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10)
          this.offContext.fillStyle = 'rgb(0,0,255)'
          this.offContext.fillRect(0, 0, 100, 100)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

translate

translate(x: number, y: number): void

移动当前坐标系的原点。

参数:

参数

类型

必填

默认值

描述

x

number

0

设置水平平移量。

y

number

0

设置竖直平移量。

示例:

// xxx.ets
@Entry
@Component
struct Translate {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.fillRect(10, 10, 50, 50)
          this.offContext.translate(70, 70)
          this.offContext.fillRect(10, 10, 50, 50)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

drawImage

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void

drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void

进行图像绘制。

参数:

参数

类型

必填

默认值

描述

image

​ImageBitmap​​​ 或​​PixelMap​

null

图片资源,请参考ImageBitmap或PixelMap。

sx

number

0

裁切源图像时距离源图像左上角的x坐标值。

sy

number

0

裁切源图像时距离源图像左上角的y坐标值。

sw

number

0

裁切源图像时需要裁切的宽度。

sh

number

0

裁切源图像时需要裁切的高度。

dx

number

0

绘制区域左上角在x轴的位置。

dy

number

0

绘制区域左上角在y 轴的位置。

dw

number

0

绘制区域的宽度。

dh

number

0

绘制区域的高度。

示例:

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

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

createImageData

createImageData(sw: number, sh: number): ImageData

根据宽高创建ImageData对象,请参考​​ImageData​​。

参数:

参数

类型

必填

默认

描述

sw

number

0

ImageData的宽度。

sh

number

0

ImageData的高度。

createImageData(imageData: ImageData): ImageData

根据已创建的ImageData对象创建新的ImageData对象,请参考​​ImageData​​。

参数:

参数

类型

必填

默认

描述

imagedata

​ImageData​

null

被复制的ImageData对象。

返回值:

类型

说明

​ImageData​

新的ImageData对象

getPixelMap

getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap

以当前canvas指定区域内的像素创建​​PixelMap​​对象。

参数:

参数

类型

必填

默认值

描述

sx

number

0

需要输出的区域的左上角x坐标。

sy

number

0

需要输出的区域的左上角y坐标。

sw

number

0

需要输出的区域的宽度。

sh

number

0

需要输出的区域的高度。

返回值:

类型

说明

​PixelMap​

新的PixelMap对象

setPixelMap

setPixelMap(value?: PixelMap): void

将当前传入​​PixelMap​​对象绘制在画布上。

参数:

参数

类型

必填

默认值

描述

sx

number

0

需要输出的区域的左上角x坐标。

sy

number

0

需要输出的区域的左上角y坐标。

sw

number

0

需要输出的区域的宽度。

sh

number

0

需要输出的区域的高度。

返回值:

类型

说明

​PixelMap​

新的PixelMap对象

getImageData

getImageData(sx: number, sy: number, sw: number, sh: number): ImageData

以当前canvas指定区域内的像素创建​​ImageData​​对象。

参数:

参数

类型

必填

默认值

描述

sx

number

0

需要输出的区域的左上角x坐标。

sy

number

0

需要输出的区域的左上角y坐标。

sw

number

0

需要输出的区域的宽度。

sh

number

0

需要输出的区域的高度。

返回值:

类型

说明

​ImageData​

新的ImageData对象

示例:

// xxx.ets
@Entry
@Component
struct GetImageData {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.drawImage(this.img,0,0,130,130)
          var imagedata = this.offContext.getImageData(50,50,130,130)
          this.offContext.putImageData(imagedata,150,150)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

putImageData

putImageData(imageData: Object, dx: number, dy: number): void

putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void

使用​​ImageData​​数据填充新的矩形区域。

参数:

参数

类型

必填

默认值

描述

imagedata

Object

null

包含像素值的ImageData对象。

dx

number

0

填充区域在x轴方向的偏移量。

dy

number

0

填充区域在y轴方向的偏移量。

dirtyX

number

0

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

dirtyY

number

0

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

dirtyWidth

number

imagedata的宽度

源图像数据矩形裁切范围的宽度。

dirtyHeight

number

imagedata的高度

源图像数据矩形裁切范围的高度。

示例:

// xxx.ets
@Entry
@Component
struct PutImageData {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          var imageData = this.offContext.createImageData(100, 100)
          for (var i = 0; i < imageData.data.length; i += 4) {
            imageData.data[i + 0] = 255
            imageData.data[i + 1] = 0
            imageData.data[i + 2] = 255
            imageData.data[i + 3] = 255
          }
          this.offContext.putImageData(imageData, 10, 10)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

setLineDash

setLineDash(segments: number[]): void

设置画布的虚线样式。

参数:

参数

类型

描述

segments

number[]

描述线段如何交替和线段间距长度的数组。

示例:

@Entry
@Component
struct SetLineDash {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.arc(100, 75, 50, 0, 6.28)
          this.offContext.setLineDash([10,20])
          this.offContext.stroke()
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
      })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

getLineDash

getLineDash(): number[]

获得当前画布的虚线样式。

返回值:

类型

说明

number[]

返回数组,该数组用来描述线段如何交替和间距长度。

示例:

// xxx.ets
@Entry
@Component
struct OffscreenCanvasGetLineDash {
  @State message: string = 'Hello World'
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            console.error('before getlinedash clicked')
            let res = this.offContext.getLineDash()
            console.error(JSON.stringify(res))
          })
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.offContext.arc(100, 75, 50, 0, 6.28)
            this.offContext.setLineDash([10,20])
            this.offContext.stroke()
            let res = this.offContext.getLineDash()
            var image = this.offContext.transferToImageBitmap()
            this.context.transferFromImageBitmap(image)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

toDataURL

toDataURL(type?: string, quality?: number): string

生成一个包含图片展示的URL。

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

参数:

参数名

参数类型

必填

描述

type

string

可选参数,用于指定图像格式,默认格式为image/png。

quality

number

在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。

返回值:

类型

说明

string

图像的URL地址。

示例:

// xxx.ets  
@Entry
@Component
struct ToDataURL {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          var dataURL = this.offContext.toDataURL()
        })
    }
    .width('100%')
    .height('100%')
  }
}
    ts

imageSmoothingQuality

imageSmoothingQuality(quality: imageSmoothingQuality)

用于设置图像平滑度。该接口为空接口。

参数:

参数

类型

描述

quality

imageSmoothingQuality

支持如下三种类型:‘low’, ‘medium’, ‘high’。

transferToImageBitmap

transferToImageBitmap(): ImageBitmap

在离屏画布最近渲染的图像上创建一个ImageBitmap对象。

返回值:

类型

说明

​ImageBitmap​

存储离屏画布上渲染的像素数据。

示例:

// xxx.ets
@Entry
@Component
struct PutImageData {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          var imageData = this.offContext.createImageData(100, 100)
          for (var i = 0; i < imageData.data.length; i += 4) {
            imageData.data[i + 0] = 255
            imageData.data[i + 1] = 0
            imageData.data[i + 2] = 255
            imageData.data[i + 3] = 255
          }
          this.offContext.putImageData(imageData, 10, 10)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

restore

restore(): void

对保存的绘图上下文进行恢复。

示例:

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.save() // save the default state
          this.offContext.fillStyle = "#00ff00"
          this.offContext.fillRect(20, 20, 100, 100)
          this.offContext.restore() // restore to the default state
          this.offContext.fillRect(150, 75, 100, 100)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

save

save(): void

对当前的绘图上下文进行保存。

示例:

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.offContext.save() // save the default state
          this.offContext.fillStyle = "#00ff00"
          this.offContext.fillRect(20, 20, 100, 100)
          this.offContext.restore() // restore to the default state
          this.offContext.fillRect(150, 75, 100, 100)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

createLinearGradient

createLinearGradient(x0: number, y0: number, x1: number, y1: number): void

创建一个线性渐变色。

参数:

参数

类型

必填

默认值

描述

x0

number

0

起点的x轴坐标。

y0

number

0

起点的y轴坐标。

x1

number

0

终点的x轴坐标。

y1

number

0

终点的y轴坐标。

示例:

// xxx.ets
@Entry
@Component
struct CreateLinearGradient {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          var grad = this.offContext.createLinearGradient(50,0, 300,100)
          grad.addColorStop(0.0, '#ff0000')
          grad.addColorStop(0.5, '#ffffff')
          grad.addColorStop(1.0, '#00ff00')
          this.offContext.fillStyle = grad
          this.offContext.fillRect(0, 0, 400, 400)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

createRadialGradient

createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): void

创建一个径向渐变色。

参数:

参数

类型

必填

默认值

描述

x0

number

0

起始圆的x轴坐标。

y0

number

0

起始圆的y轴坐标。

r0

number

0

起始圆的半径。必须是非负且有限的。

x1

number

0

终点圆的x轴坐标。

y1

number

0

终点圆的y轴坐标。

r1

number

0

终点圆的半径。必须为非负且有限的。

示例:

// xxx.ets
@Entry
@Component
struct CreateRadialGradient {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
          grad.addColorStop(0.0, '#ff0000')
          grad.addColorStop(0.5, '#ffffff')
          grad.addColorStop(1.0, '#00ff00')
          this.offContext.fillStyle = grad
          this.offContext.fillRect(0, 0, 440, 440)
          var image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony应用开发OffscreenCanvasRenderingContext2D(下篇)-鸿蒙开发者社区

CanvasPattern

一个Object对象, 通过​​createPattern​​方法创建。



文章转载自:​​https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md/​

已于2023-4-18 16:42:05修改
收藏
回复
举报
回复
    相关推荐