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修改

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用开发OffscreenCanvasRenderingContext2D（下篇）

arc

arcTo

ellipse

rect

fill

clip

filter

getTransform

resetTransform

direction

rotate

scale

transform

setTransform

translate

drawImage

createImageData

getPixelMap

setPixelMap

getImageData

putImageData

setLineDash

getLineDash

toDataURL

imageSmoothingQuality

transferToImageBitmap

restore

save

createLinearGradient

createRadialGradient

CanvasPattern

目录

订阅鸿蒙技术特刊，精选内容抢先看