離屏繪制

2024-01-22 18:14 更新

使用OffscreenCanvasRenderingContext2D在Canvas上進行離屏繪制,繪制對象可以是矩形、文本、圖片等。離屏繪制是指將需要繪制的內容先繪制在緩存區(qū),然后將其轉換成圖片,一次性繪制到canvas上,加快了繪制速度。

說明

從 API Version 8 開始支持。后續(xù)版本如有新增內容,則采用上角標單獨標記該內容的起始版本。

接口

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

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

width

number

離屏畫布的寬度

height

number

離屏畫布的高度

settings

RenderingContextSettings

見RenderingContextSettings接口描述。

屬性

名稱

類型

描述

fillStyle

string | CanvasGradient | CanvasPattern

指定繪制的填充色。

- 類型為string時,表示設置填充區(qū)域的顏色。

- 類型為CanvasGradient時,表示漸變對象,使用createLinearGradient方法創(chuàng)建。

- 類型為CanvasPattern時,使用createPattern方法創(chuàng)建。

從API version 9開始,該接口支持在ArkTS卡片中使用。

lineWidth

number

設置繪制線條的寬度。

從API version 9開始,該接口支持在ArkTS卡片中使用。

strokeStyle

string | CanvasGradient | CanvasPattern

設置描邊的顏色。

- 類型為string時,表示設置描邊使用的顏色。

- 類型為CanvasGradient時,表示漸變對象,使用createLinearGradient方法創(chuàng)建。

- 類型為CanvasPattern時,使用createPattern方法創(chuàng)建。

從API version 9開始,該接口支持在ArkTS卡片中使用。

lineCap

CanvasLineCap

指定線端點的樣式,可選值為:

- 'butt':線端點以方形結束。

- 'round':線端點以圓形結束。

- 'square':線端點以方形結束,該樣式下會增加一個長度和線段厚度相同,寬度是線段厚度一半的矩形。

- 默認值:'butt'。

從API version 9開始,該接口支持在ArkTS卡片中使用。

lineJoin

CanvasLineJoin

指定線段間相交的交點樣式,可選值為:

- 'round':在線段相連處繪制一個扇形,扇形的圓角半徑是線段的寬度。

- 'bevel':在線段相連處使用三角形為底填充, 每個部分矩形拐角獨立。

- 'miter':在相連部分的外邊緣處進行延伸,使其相交于一點,形成一個菱形區(qū)域,該屬性可以通過設置miterLimit屬性展現(xiàn)效果。

- 默認值:'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。

- 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基線的區(qū)別在于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卡片中使用。

說明

fillStyle、shadowColor與 strokeStyle 中string類型格式為 'rgb(255, 255, 255)','rgba(255, 255, 255, 1.0)','#FFFFFF'。

fillStyle

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct FillStyleExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillStyle = '#0000ff'
  16. this.offContext.fillRect(20, 20, 150, 100)
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

lineWidth

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct LineWidthExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.lineWidth = 5
  16. this.offContext.strokeRect(25, 25, 85, 105)
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

strokeStyle

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct StrokeStyleExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.lineWidth = 10
  16. this.offContext.strokeStyle = '#0000ff'
  17. this.offContext.strokeRect(25, 25, 155, 105)
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

lineCap

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct LineCapExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.lineWidth = 8
  16. this.offContext.beginPath()
  17. this.offContext.lineCap = 'round'
  18. this.offContext.moveTo(30, 50)
  19. this.offContext.lineTo(220, 50)
  20. this.offContext.stroke()
  21. var image = this.offContext.transferToImageBitmap()
  22. this.context.transferFromImageBitmap(image)
  23. })
  24. }
  25. .width('100%')
  26. .height('100%')
  27. }
  28. }

lineJoin

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct LineJoinExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.lineWidth = 8
  17. this.offContext.lineJoin = 'miter'
  18. this.offContext.moveTo(30, 30)
  19. this.offContext.lineTo(120, 60)
  20. this.offContext.lineTo(30, 110)
  21. this.offContext.stroke()
  22. var image = this.offContext.transferToImageBitmap()
  23. this.context.transferFromImageBitmap(image)
  24. })
  25. }
  26. .width('100%')
  27. .height('100%')
  28. }
  29. }

miterLimit

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct MiterLimit {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.lineWidth = 8
  16. this.offContext.lineJoin = 'miter'
  17. this.offContext.miterLimit = 3
  18. this.offContext.moveTo(30, 30)
  19. this.offContext.lineTo(60, 35)
  20. this.offContext.lineTo(30, 37)
  21. this.offContext.stroke()
  22. var image = this.offContext.transferToImageBitmap()
  23. this.context.transferFromImageBitmap(image)
  24. })
  25. }
  26. .width('100%')
  27. .height('100%')
  28. }
  29. }

font

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Fonts {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.font = '30px sans-serif'
  16. this.offContext.fillText("Hello World", 20, 60)
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

textAlign

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CanvasExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.strokeStyle = '#0000ff'
  16. this.offContext.moveTo(140, 10)
  17. this.offContext.lineTo(140, 160)
  18. this.offContext.stroke()
  19. this.offContext.font = '18px sans-serif'
  20. this.offContext.textAlign = 'start'
  21. this.offContext.fillText('textAlign=start', 140, 60)
  22. this.offContext.textAlign = 'end'
  23. this.offContext.fillText('textAlign=end', 140, 80)
  24. this.offContext.textAlign = 'left'
  25. this.offContext.fillText('textAlign=left', 140, 100)
  26. this.offContext.textAlign = 'center'
  27. this.offContext.fillText('textAlign=center',140, 120)
  28. this.offContext.textAlign = 'right'
  29. this.offContext.fillText('textAlign=right',140, 140)
  30. var image = this.offContext.transferToImageBitmap()
  31. this.context.transferFromImageBitmap(image)
  32. })
  33. }
  34. .width('100%')
  35. .height('100%')
  36. }
  37. }

textBaseline

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextBaseline {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.strokeStyle = '#0000ff'
  16. this.offContext.moveTo(0, 120)
  17. this.offContext.lineTo(400, 120)
  18. this.offContext.stroke()
  19. this.offContext.font = '20px sans-serif'
  20. this.offContext.textBaseline = 'top'
  21. this.offContext.fillText('Top', 10, 120)
  22. this.offContext.textBaseline = 'bottom'
  23. this.offContext.fillText('Bottom', 55, 120)
  24. this.offContext.textBaseline = 'middle'
  25. this.offContext.fillText('Middle', 125, 120)
  26. this.offContext.textBaseline = 'alphabetic'
  27. this.offContext.fillText('Alphabetic', 195, 120)
  28. this.offContext.textBaseline = 'hanging'
  29. this.offContext.fillText('Hanging', 295, 120)
  30. var image = this.offContext.transferToImageBitmap()
  31. this.context.transferFromImageBitmap(image)
  32. })
  33. }
  34. .width('100%')
  35. .height('100%')
  36. }
  37. }

globalAlpha

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GlobalAlpha {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillStyle = 'rgb(0,0,255)'
  16. this.offContext.fillRect(0, 0, 50, 50)
  17. this.offContext.globalAlpha = 0.4
  18. this.offContext.fillStyle = 'rgb(0,0,255)'
  19. this.offContext.fillRect(50, 50, 50, 50)
  20. var image = this.offContext.transferToImageBitmap()
  21. this.context.transferFromImageBitmap(image)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

lineDashOffset

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct LineDashOffset {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.arc(100, 75, 50, 0, 6.28)
  16. this.offContext.setLineDash([10,20])
  17. this.offContext.lineDashOffset = 10.0
  18. this.offContext.stroke()
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

globalCompositeOperation

名稱

描述

source-over

在現(xiàn)有繪制內容上顯示新繪制內容,屬于默認值。

source-atop

在現(xiàn)有繪制內容頂部顯示新繪制內容。

source-in

在現(xiàn)有繪制內容中顯示新繪制內容。

source-out

在現(xiàn)有繪制內容之外顯示新繪制內容。

destination-over

在新繪制內容上方顯示現(xiàn)有繪制內容。

destination-atop

在新繪制內容頂部顯示現(xiàn)有繪制內容。

destination-in

在新繪制內容中顯示現(xiàn)有繪制內容。

destination-out

在新繪制內容外顯示現(xiàn)有繪制內容。

lighter

顯示新繪制內容和現(xiàn)有繪制內容。

copy

顯示新繪制內容而忽略現(xiàn)有繪制內容。

xor

使用異或操作對新繪制內容與現(xiàn)有繪制內容進行融合。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GlobalCompositeOperation {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillStyle = 'rgb(255,0,0)'
  16. this.offContext.fillRect(20, 20, 50, 50)
  17. this.offContext.globalCompositeOperation = 'source-over'
  18. this.offContext.fillStyle = 'rgb(0,0,255)'
  19. this.offContext.fillRect(50, 50, 50, 50)
  20. this.offContext.fillStyle = 'rgb(255,0,0)'
  21. this.offContext.fillRect(120, 20, 50, 50)
  22. this.offContext.globalCompositeOperation = 'destination-over'
  23. this.offContext.fillStyle = 'rgb(0,0,255)'
  24. this.offContext.fillRect(150, 50, 50, 50)
  25. var image = this.offContext.transferToImageBitmap()
  26. this.context.transferFromImageBitmap(image)
  27. })
  28. }
  29. .width('100%')
  30. .height('100%')
  31. }
  32. }

shadowBlur

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ShadowBlur {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.shadowBlur = 30
  16. this.offContext.shadowColor = 'rgb(0,0,0)'
  17. this.offContext.fillStyle = 'rgb(255,0,0)'
  18. this.offContext.fillRect(20, 20, 100, 80)
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

shadowColor

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ShadowColor {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.shadowBlur = 30
  16. this.offContext.shadowColor = 'rgb(0,0,255)'
  17. this.offContext.fillStyle = 'rgb(255,0,0)'
  18. this.offContext.fillRect(30, 30, 100, 100)
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

shadowOffsetX

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ShadowOffsetX {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.shadowBlur = 10
  16. this.offContext.shadowOffsetX = 20
  17. this.offContext.shadowColor = 'rgb(0,0,0)'
  18. this.offContext.fillStyle = 'rgb(255,0,0)'
  19. this.offContext.fillRect(20, 20, 100, 80)
  20. var image = this.offContext.transferToImageBitmap()
  21. this.context.transferFromImageBitmap(image)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

shadowOffsetY

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ShadowOffsetY {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.shadowBlur = 10
  16. this.offContext.shadowOffsetY = 20
  17. this.offContext.shadowColor = 'rgb(0,0,0)'
  18. this.offContext.fillStyle = 'rgb(255,0,0)'
  19. this.offContext.fillRect(30, 30, 100, 100)
  20. var image = this.offContext.transferToImageBitmap()
  21. this.context.transferFromImageBitmap(image)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

imageSmoothingEnabled

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ImageSmoothingEnabled {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
  8. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  9. build() {
  10. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  11. Canvas(this.context)
  12. .width('100%')
  13. .height('100%')
  14. .backgroundColor('#ffff00')
  15. .onReady(() =>{
  16. this.offContext.imageSmoothingEnabled = false
  17. this.offContext.drawImage( this.img,0,0,400,200)
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

方法

fillRect

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

填充一個矩形。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

說明

x

number

0

指定矩形左上角點的x坐標。

y

number

0

指定矩形左上角點的y坐標。

width

number

0

指定矩形的寬度。

height

number

0

指定矩形的高度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct FillRect {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillRect(30,30,100,100)
  16. var image = this.offContext.transferToImageBitmap()
  17. this.context.transferFromImageBitmap(image)
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

strokeRect

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

繪制具有邊框的矩形,矩形內部不填充。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

說明

x

number

0

指定矩形的左上角x坐標。

y

number

0

指定矩形的左上角y坐標。

width

number

0

指定矩形的寬度。

height

number

0

指定矩形的高度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct StrokeRect {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.strokeRect(30, 30, 200, 150)
  16. var image = this.offContext.transferToImageBitmap()
  17. this.context.transferFromImageBitmap(image)
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

clearRect

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

刪除指定區(qū)域內的繪制內容。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x

number

0

指定矩形上的左上角x坐標。

y

number

0

指定矩形上的左上角y坐標。

width

number

0

指定矩形的寬度。

height

number

0

指定矩形的高度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ClearRect {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillStyle = 'rgb(0,0,255)'
  16. this.offContext.fillRect(20,20,200,200)
  17. this.offContext.clearRect(30,30,150,100)
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

fillText

fillText(text: string, x: number, y: number, maxWidth?: number): void

繪制填充類文本。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

說明

text

string

""

需要繪制的文本內容。

x

number

0

需要繪制的文本的左下角x坐標。

y

number

0

需要繪制的文本的左下角y坐標。

maxWidth

number

-

指定文本允許的最大寬度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct FillText {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.font = '30px sans-serif'
  16. this.offContext.fillText("Hello World!", 20, 100)
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

strokeText

strokeText(text: string, x: number, y: number): void

繪制描邊類文本。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

text

string

""

需要繪制的文本內容。

x

number

0

需要繪制的文本的左下角x坐標。

y

number

0

需要繪制的文本的左下角y坐標。

maxWidth

number

-

需要繪制的文本的最大寬度 。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct StrokeText {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.font = '55px sans-serif'
  16. this.offContext.strokeText("Hello World!", 20, 60)
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

measureText

measureText(text: string): TextMetrics

該方法返回一個文本測算的對象,通過該對象可以獲取指定文本的寬度值。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

說明

text

string

""

需要進行測量的文本。

返回值:

類型

說明

TextMetrics

文本的尺寸信息

TextMetrics類型描述:

屬性

類型

描述

width

number

字符串的寬度。

height

number

字符串的高度。

actualBoundingBoxAscent

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到渲染文本的矩形邊界頂部的距離,當前值為0。

actualBoundingBoxDescent

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到渲染文本的矩形邊界底部的距離,當前值為0。

actualBoundingBoxLeft

number

平行于基線,從CanvasRenderingContext2D.textAlign 屬性確定的對齊點到文本矩形邊界左側的距離,當前值為0。

actualBoundingBoxRight

number

平行于基線,從CanvasRenderingContext2D.textAlign 屬性確定的對齊點到文本矩形邊界右側的距離,當前值為0。

alphabeticBaseline

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到線框的 alphabetic 基線的距離,當前值為0。

emHeightAscent

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到線框中 em 方塊頂部的距離,當前值為0。

emHeightDescent

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到線框中 em 方塊底部的距離,當前值為0。

fontBoundingBoxAscent

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到渲染文本的所有字體的矩形最高邊界頂部的距離,當前值為0。

fontBoundingBoxDescent

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到渲染文本的所有字體的矩形邊界最底部的距離,當前值為0。

hangingBaseline

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到線框的 hanging 基線的距離,當前值為0。

ideographicBaseline

number

從CanvasRenderingContext2D.textBaseline 屬性標明的水平線到線框的 ideographic 基線的距離,當前值為0。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct MeasureText {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.font = '50px sans-serif'
  16. this.offContext.fillText("Hello World!", 20, 100)
  17. this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

stroke

stroke(path?: Path2D): void

進行邊框繪制操作。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

path

Path2D

null

需要繪制的Path2D。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Stroke {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.moveTo(25, 25)
  16. this.offContext.lineTo(25, 105)
  17. this.offContext.lineTo(75, 105)
  18. this.offContext.lineTo(75, 25)
  19. this.offContext.strokeStyle = 'rgb(0,0,255)'
  20. this.offContext.stroke()
  21. var image = this.offContext.transferToImageBitmap()
  22. this.context.transferFromImageBitmap(image)
  23. })
  24. }
  25. .width('100%')
  26. .height('100%')
  27. }
  28. }

beginPath

beginPath(): void

創(chuàng)建一個新的繪制路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct BeginPath {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.lineWidth = 6
  17. this.offContext.strokeStyle = '#0000ff'
  18. this.offContext.moveTo(15, 80)
  19. this.offContext.lineTo(280, 160)
  20. this.offContext.stroke()
  21. var image = this.offContext.transferToImageBitmap()
  22. this.context.transferFromImageBitmap(image)
  23. })
  24. }
  25. .width('100%')
  26. .height('100%')
  27. }
  28. }

moveTo

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

路徑從當前點移動到指定點。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

說明

x

number

0

指定位置的x坐標。

y

number

0

指定位置的y坐標。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct MoveTo {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.moveTo(10, 10)
  17. this.offContext.lineTo(280, 160)
  18. this.offContext.stroke()
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

lineTo

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

從當前點到指定點進行路徑連接。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x

number

0

指定位置的x坐標。

y

number

0

指定位置的y坐標。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct LineTo {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.moveTo(10, 10)
  17. this.offContext.lineTo(280, 160)
  18. this.offContext.stroke()
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

closePath

closePath(): void

結束當前路徑形成一個封閉路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ClosePath {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.moveTo(30, 30)
  17. this.offContext.lineTo(110, 30)
  18. this.offContext.lineTo(70, 90)
  19. this.offContext.closePath()
  20. this.offContext.stroke()
  21. var image = this.offContext.transferToImageBitmap()
  22. this.context.transferFromImageBitmap(image)
  23. })
  24. }
  25. .width('100%')
  26. .height('100%')
  27. }
  28. }

createPattern

createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null

通過指定圖像和重復方式創(chuàng)建圖片填充的模板。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

image

ImageBitmap

null

圖源對象,具體參考ImageBitmap對象。

repetition

string

“”

設置圖像重復的方式,取值為:'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

返回值:

類型

說明

CanvasPattern

通過指定圖像和重復方式創(chuàng)建圖片填充的模板對象。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CreatePattern {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
  8. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  9. build() {
  10. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  11. Canvas(this.context)
  12. .width('100%')
  13. .height('100%')
  14. .backgroundColor('#ffff00')
  15. .onReady(() =>{
  16. var pattern = this.offContext.createPattern(this.img, 'repeat')
  17. this.offContext.fillStyle = pattern
  18. this.offContext.fillRect(0, 0, 200, 200)
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

bezierCurveTo

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

創(chuàng)建三次貝賽爾曲線的路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

cp1x

number

0

第一個貝塞爾參數(shù)的x坐標值。

cp1y

number

0

第一個貝塞爾參數(shù)的y坐標值。

cp2x

number

0

第二個貝塞爾參數(shù)的x坐標值。

cp2y

number

0

第二個貝塞爾參數(shù)的y坐標值。

x

number

0

路徑結束時的x坐標值。

y

number

0

路徑結束時的y坐標值。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct BezierCurveTo {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.moveTo(10, 10)
  17. this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
  18. this.offContext.stroke()
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void

創(chuàng)建二次貝賽爾曲線的路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

cpx

number

0

貝塞爾參數(shù)的x坐標值。

cpy

number

0

貝塞爾參數(shù)的y坐標值。

x

number

0

路徑結束時的x坐標值。

y

number

0

路徑結束時的y坐標值。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct QuadraticCurveTo {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.moveTo(20, 20)
  17. this.offContext.quadraticCurveTo(100, 100, 200, 20)
  18. this.offContext.stroke()
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

arc

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

繪制弧線路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x

number

0

弧線圓心的x坐標值。

y

number

0

弧線圓心的y坐標值。

radius

number

0

弧線的圓半徑。

startAngle

number

0

弧線的起始弧度。

endAngle

number

0

弧線的終止弧度。

counterclockwise

boolean

false

是否逆時針繪制圓弧。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Arc {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.arc(100, 75, 50, 0, 6.28)
  17. this.offContext.stroke()
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

arcTo

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

依據(jù)圓弧經(jīng)過的點和圓弧半徑創(chuàng)建圓弧路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x1

number

0

圓弧經(jīng)過的第一個點的x坐標值。

y1

number

0

圓弧經(jīng)過的第一個點的y坐標值。

x2

number

0

圓弧經(jīng)過的第二個點的x坐標值。

y2

number

0

圓弧經(jīng)過的第二個點的y坐標值。

radius

number

0

圓弧的圓半徑值。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ArcTo {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.moveTo(100, 20)
  16. this.offContext.arcTo(150, 20, 150, 70, 50)
  17. this.offContext.stroke()
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

ellipse

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

在規(guī)定的矩形區(qū)域繪制一個橢圓。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

說明

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:順時針方向繪制橢圓。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CanvasExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.beginPath()
  16. this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
  17. this.offContext.stroke()
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

rect

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

創(chuàng)建矩形路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x

number

0

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

y

number

0

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

w

number

0

指定矩形的寬度。

h

number

0

指定矩形的高度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CanvasExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
  16. this.offContext.stroke()
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

fill

fill(fillRule?: CanvasFillRule): void

對封閉路徑進行填充。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

fillRule

CanvasFillRule

"nonzero"

指定要填充對象的規(guī)則。

可選參數(shù)為:"nonzero", "evenodd"。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Fill {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
  16. this.offContext.fill()
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

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

對封閉路徑進行填充。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

path

Path2D

 

Path2D填充路徑。

fillRule

CanvasFillRule

"nonzero"

指定要填充對象的規(guī)則。

可選參數(shù)為:"nonzero", "evenodd"。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Fill {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. let region = new Path2D()
  16. region.moveTo(30, 90)
  17. region.lineTo(110, 20)
  18. region.lineTo(240, 130)
  19. region.lineTo(60, 130)
  20. region.lineTo(190, 20)
  21. region.lineTo(270, 90)
  22. region.closePath()
  23. // Fill path
  24. this.offContext.fillStyle = '#00ff00'
  25. this.offContext.fill(region, "evenodd")
  26. var image = this.offContext.transferToImageBitmap()
  27. this.context.transferFromImageBitmap(image)
  28. })
  29. }
  30. .width('100%')
  31. .height('100%')
  32. }
  33. }

clip

clip(fillRule?: CanvasFillRule): void

設置當前路徑為剪切路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

fillRule

CanvasFillRule

"nonzero"

指定要剪切對象的規(guī)則。

可選參數(shù)為:"nonzero", "evenodd"。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Clip {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.rect(0, 0, 100, 200)
  16. this.offContext.stroke()
  17. this.offContext.clip()
  18. this.offContext.fillStyle = "rgb(255,0,0)"
  19. this.offContext.fillRect(0, 0, 200, 200)
  20. var image = this.offContext.transferToImageBitmap()
  21. this.context.transferFromImageBitmap(image)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

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

設置封閉路徑為剪切路徑。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

path

Path2D

 

Path2D剪切路徑。

fillRule

CanvasFillRule

"nonzero"

指定要剪切對象的規(guī)則。

可選參數(shù)為:"nonzero", "evenodd"。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Clip {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. let region = new Path2D()
  16. region.moveTo(30, 90)
  17. region.lineTo(110, 20)
  18. region.lineTo(240, 130)
  19. region.lineTo(60, 130)
  20. region.lineTo(190, 20)
  21. region.lineTo(270, 90)
  22. region.closePath()
  23. this.offContext.clip(region,"evenodd")
  24. this.offContext.fillStyle = "rgb(0,255,0)"
  25. this.offContext.fillRect(0, 0, 600, 600)
  26. var image = this.offContext.transferToImageBitmap()
  27. this.context.transferFromImageBitmap(image)
  28. })
  29. }
  30. .width('100%')
  31. .height('100%')
  32. }
  33. }

filter

filter(filter: string): void

為Canvas圖形設置各類濾鏡效果。該接口為空接口。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

說明

filter

string

-

接受各類濾鏡效果的函數(shù)。

getTransform

getTransform(): Matrix2D

獲取當前被應用到上下文的轉換矩陣。該接口為空接口。

從API version 9開始,該接口支持在ArkTS卡片中使用。

resetTransform

resetTransform(): void

使用單位矩陣重新設置當前變形。該接口為空接口。

從API version 9開始,該接口支持在ArkTS卡片中使用。

direction

direction(direction: CanvasDirection): void

繪制文本時,描述當前文本方向的屬性。該接口為空接口。

從API version 9開始,該接口支持在ArkTS卡片中使用。

rotate

rotate(angle: number): void

針對當前坐標軸進行順時針旋轉。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

angle

number

0

設置順時針旋轉的弧度值,可以通過Math.PI / 180將角度轉換為弧度值。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Rotate {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.rotate(45 * Math.PI / 180)
  16. this.offContext.fillRect(70, 20, 50, 50)
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

scale

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

設置canvas畫布的縮放變換屬性,后續(xù)的繪制操作將按照縮放比例進行縮放。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x

number

0

設置水平方向的縮放值。

y

number

0

設置垂直方向的縮放值。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Scale {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.lineWidth = 3
  16. this.offContext.strokeRect(30, 30, 50, 50)
  17. this.offContext.scale(2, 2) // Scale to 200%
  18. this.offContext.strokeRect(30, 30, 50, 50)
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

transform

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

transform方法對應一個變換矩陣,想對一個圖形進行變化的時候,只要設置此變換矩陣相應的參數(shù),對圖形的各個定點的坐標分別乘以這個矩陣,就能得到新的定點的坐標。矩陣變換效果可疊加。

從API version 9開始,該接口支持在ArkTS卡片中使用。

說明

變換后的坐標計算方式(x和y為變換前坐標,x'和y'為變換后坐標):

  • x' = scaleX * x + skewY * y + translateX

  • y' = skewX * x + scaleY * y + translateY

參數(shù):

參數(shù)

類型

必填

默認值

描述

a

number

0

scaleX: 指定水平縮放值。

b

number

0

skewX: 指定水平傾斜值。

c

number

0

skewY: 指定垂直傾斜值。

d

number

0

scaleY: 指定垂直縮放值。

e

number

0

translateX: 指定水平移動值。

f

number

0

translateY: 指定垂直移動值。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Transform {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillStyle = 'rgb(0,0,0)'
  16. this.offContext.fillRect(0, 0, 100, 100)
  17. this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
  18. this.offContext.fillStyle = 'rgb(255,0,0)'
  19. this.offContext.fillRect(0, 0, 100, 100)
  20. this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
  21. this.offContext.fillStyle = 'rgb(0,0,255)'
  22. this.offContext.fillRect(0, 0, 100, 100)
  23. var image = this.offContext.transferToImageBitmap()
  24. this.context.transferFromImageBitmap(image)
  25. })
  26. }
  27. .width('100%')
  28. .height('100%')
  29. }
  30. }

setTransform

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

setTransform方法使用的參數(shù)和transform()方法相同,但setTransform()方法會重置現(xiàn)有的變換矩陣并創(chuàng)建新的變換矩陣。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

a

number

0

scaleX: 指定水平縮放值。

b

number

0

skewX: 指定水平傾斜值。

c

number

0

skewY: 指定垂直傾斜值。

d

number

0

scaleY: 指定垂直縮放值。

e

number

0

translateX: 指定水平移動值。

f

number

0

translateY: 指定垂直移動值。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct SetTransform {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillStyle = 'rgb(255,0,0)'
  16. this.offContext.fillRect(0, 0, 100, 100)
  17. this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10)
  18. this.offContext.fillStyle = 'rgb(0,0,255)'
  19. this.offContext.fillRect(0, 0, 100, 100)
  20. var image = this.offContext.transferToImageBitmap()
  21. this.context.transferFromImageBitmap(image)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

translate

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

移動當前坐標系的原點。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x

number

0

設置水平平移量。

y

number

0

設置豎直平移量。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Translate {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.fillRect(10, 10, 50, 50)
  16. this.offContext.translate(70, 70)
  17. this.offContext.fillRect(10, 10, 50, 50)
  18. var image = this.offContext.transferToImageBitmap()
  19. this.context.transferFromImageBitmap(image)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

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

進行圖像繪制。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

image

ImageBitmap 或PixelMap

null

圖片資源,請參考ImageBitmap或PixelMap。

sx

number

0

裁切源圖像時距離源圖像左上角的x坐標值。

sy

number

0

裁切源圖像時距離源圖像左上角的y坐標值。

sw

number

0

裁切源圖像時需要裁切的寬度。

sh

number

0

裁切源圖像時需要裁切的高度。

dx

number

0

繪制區(qū)域左上角在x軸的位置。

dy

number

0

繪制區(qū)域左上角在y 軸的位置。

dw

number

0

繪制區(qū)域的寬度。

dh

number

0

繪制區(qū)域的高度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct DrawImage {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
  8. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  9. build() {
  10. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  11. Canvas(this.context)
  12. .width('100%')
  13. .height('100%')
  14. .backgroundColor('#ffff00')
  15. .onReady(() => {
  16. this.offContext.drawImage( this.img,0,0,400,200)
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

createImageData

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

根據(jù)寬高創(chuàng)建ImageData對象,請參考ImageData

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認

描述

sw

number

0

ImageData的寬度。

sh

number

0

ImageData的高度。

createImageData(imageData: ImageData): ImageData

根據(jù)已創(chuàng)建的ImageData對象創(chuàng)建新的ImageData對象,請參考ImageData

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認

描述

imagedata

ImageData

null

被復制的ImageData對象。

返回值:

類型

說明

ImageData

新的ImageData對象

getPixelMap

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

以當前canvas指定區(qū)域內的像素創(chuàng)建PixelMap對象。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

sx

number

0

需要輸出的區(qū)域的左上角x坐標。

sy

number

0

需要輸出的區(qū)域的左上角y坐標。

sw

number

0

需要輸出的區(qū)域的寬度。

sh

number

0

需要輸出的區(qū)域的高度。

返回值:

類型

說明

PixelMap

新的PixelMap對象

setPixelMap

setPixelMap(value?: PixelMap): void

將當前傳入PixelMap對象繪制在畫布上。

參數(shù):

參數(shù)

類型

必填

默認值

描述

sx

number

0

需要輸出的區(qū)域的左上角x坐標。

sy

number

0

需要輸出的區(qū)域的左上角y坐標。

sw

number

0

需要輸出的區(qū)域的寬度。

sh

number

0

需要輸出的區(qū)域的高度。

返回值:

類型

說明

PixelMap

新的PixelMap對象

getImageData

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

以當前canvas指定區(qū)域內的像素創(chuàng)建ImageData對象。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

sx

number

0

需要輸出的區(qū)域的左上角x坐標。

sy

number

0

需要輸出的區(qū)域的左上角y坐標。

sw

number

0

需要輸出的區(qū)域的寬度。

sh

number

0

需要輸出的區(qū)域的高度。

返回值:

類型

說明

ImageData

新的ImageData對象

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GetImageData {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
  9. build() {
  10. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  11. Canvas(this.context)
  12. .width('100%')
  13. .height('100%')
  14. .backgroundColor('#ffff00')
  15. .onReady(() =>{
  16. this.offContext.drawImage(this.img,0,0,130,130)
  17. var imagedata = this.offContext.getImageData(50,50,130,130)
  18. this.offContext.putImageData(imagedata,150,150)
  19. var image = this.offContext.transferToImageBitmap()
  20. this.context.transferFromImageBitmap(image)
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

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數(shù)據(jù)填充新的矩形區(qū)域。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

imagedata

Object

null

包含像素值的ImageData對象。

dx

number

0

填充區(qū)域在x軸方向的偏移量。

dy

number

0

填充區(qū)域在y軸方向的偏移量。

dirtyX

number

0

源圖像數(shù)據(jù)矩形裁切范圍左上角距離源圖像左上角的x軸偏移量。

dirtyY

number

0

源圖像數(shù)據(jù)矩形裁切范圍左上角距離源圖像左上角的y軸偏移量。

dirtyWidth

number

imagedata的寬度

源圖像數(shù)據(jù)矩形裁切范圍的寬度。

dirtyHeight

number

imagedata的高度

源圖像數(shù)據(jù)矩形裁切范圍的高度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PutImageData {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. var imageData = this.offContext.createImageData(100, 100)
  16. for (var i = 0; i < imageData.data.length; i += 4) {
  17. imageData.data[i + 0] = 255
  18. imageData.data[i + 1] = 0
  19. imageData.data[i + 2] = 255
  20. imageData.data[i + 3] = 255
  21. }
  22. this.offContext.putImageData(imageData, 10, 10)
  23. var image = this.offContext.transferToImageBitmap()
  24. this.context.transferFromImageBitmap(image)
  25. })
  26. }
  27. .width('100%')
  28. .height('100%')
  29. }
  30. }

setLineDash

setLineDash(segments: number[]): void

設置畫布的虛線樣式。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

描述

segments

number[]

描述線段如何交替和線段間距長度的數(shù)組。

示例:

  1. @Entry
  2. @Component
  3. struct SetLineDash {
  4. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  5. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  6. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  7. build() {
  8. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  9. Canvas(this.context)
  10. .width('100%')
  11. .height('100%')
  12. .backgroundColor('#ffff00')
  13. .onReady(() =>{
  14. this.offContext.arc(100, 75, 50, 0, 6.28)
  15. this.offContext.setLineDash([10,20])
  16. this.offContext.stroke()
  17. var image = this.offContext.transferToImageBitmap()
  18. this.context.transferFromImageBitmap(image)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

getLineDash

getLineDash(): number[]

獲得當前畫布的虛線樣式。

從API version 9開始,該接口支持在ArkTS卡片中使用。

返回值:

類型

說明

number[]

返回數(shù)組,該數(shù)組用來描述線段如何交替和間距長度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct OffscreenCanvasGetLineDash {
  5. @State message: string = 'Hello World'
  6. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  7. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  8. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  9. build() {
  10. Row() {
  11. Column() {
  12. Text(this.message)
  13. .fontSize(50)
  14. .fontWeight(FontWeight.Bold)
  15. .onClick(()=>{
  16. console.error('before getlinedash clicked')
  17. let res = this.offContext.getLineDash()
  18. console.error(JSON.stringify(res))
  19. })
  20. Canvas(this.context)
  21. .width('100%')
  22. .height('100%')
  23. .backgroundColor('#ffff00')
  24. .onReady(() => {
  25. this.offContext.arc(100, 75, 50, 0, 6.28)
  26. this.offContext.setLineDash([10,20])
  27. this.offContext.stroke()
  28. let res = this.offContext.getLineDash()
  29. var image = this.offContext.transferToImageBitmap()
  30. this.context.transferFromImageBitmap(image)
  31. })
  32. }
  33. .width('100%')
  34. }
  35. .height('100%')
  36. }
  37. }

toDataURL

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

生成一個包含圖片展示的URL。

從API version 9開始,該接口支持在ArkTS卡片中使用。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名

參數(shù)類型

必填

描述

type

string

可選參數(shù),用于指定圖像格式,默認格式為image/png。

quality

number

在指定圖片格式為image/jpeg或image/webp的情況下,可以從0到1的區(qū)間內選擇圖片的質量。如果超出取值范圍,將會使用默認值0.92。

返回值:

類型

說明

string

圖像的URL地址。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ToDataURL {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. var dataURL = this.offContext.toDataURL()
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

imageSmoothingQuality

imageSmoothingQuality(quality: imageSmoothingQuality)

用于設置圖像平滑度。該接口為空接口。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

描述

quality

imageSmoothingQuality

支持如下三種類型:'low', 'medium', 'high'。

transferToImageBitmap

transferToImageBitmap(): ImageBitmap

在離屏畫布最近渲染的圖像上創(chuàng)建一個ImageBitmap對象。

從API version 9開始,該接口支持在ArkTS卡片中使用。

返回值:

類型

說明

ImageBitmap

存儲離屏畫布上渲染的像素數(shù)據(jù)。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PutImageData {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. var imageData = this.offContext.createImageData(100, 100)
  16. for (var i = 0; i < imageData.data.length; i += 4) {
  17. imageData.data[i + 0] = 255
  18. imageData.data[i + 1] = 0
  19. imageData.data[i + 2] = 255
  20. imageData.data[i + 3] = 255
  21. }
  22. this.offContext.putImageData(imageData, 10, 10)
  23. var image = this.offContext.transferToImageBitmap()
  24. this.context.transferFromImageBitmap(image)
  25. })
  26. }
  27. .width('100%')
  28. .height('100%')
  29. }
  30. }

restore

restore(): void

對保存的繪圖上下文進行恢復。

從API version 9開始,該接口支持在ArkTS卡片中使用。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CanvasExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.save() // save the default state
  16. this.offContext.fillStyle = "#00ff00"
  17. this.offContext.fillRect(20, 20, 100, 100)
  18. this.offContext.restore() // restore to the default state
  19. this.offContext.fillRect(150, 75, 100, 100)
  20. var image = this.offContext.transferToImageBitmap()
  21. this.context.transferFromImageBitmap(image)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

save

save(): void

對當前的繪圖上下文進行保存。

從API version 9開始,該接口支持在ArkTS卡片中使用。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CanvasExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. this.offContext.save() // save the default state
  16. this.offContext.fillStyle = "#00ff00"
  17. this.offContext.fillRect(20, 20, 100, 100)
  18. this.offContext.restore() // restore to the default state
  19. this.offContext.fillRect(150, 75, 100, 100)
  20. var image = this.offContext.transferToImageBitmap()
  21. this.context.transferFromImageBitmap(image)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

createLinearGradient

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

創(chuàng)建一個線性漸變色。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x0

number

0

起點的x軸坐標。

y0

number

0

起點的y軸坐標。

x1

number

0

終點的x軸坐標。

y1

number

0

終點的y軸坐標。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CreateLinearGradient {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. var grad = this.offContext.createLinearGradient(50,0, 300,100)
  16. grad.addColorStop(0.0, '#ff0000')
  17. grad.addColorStop(0.5, '#ffffff')
  18. grad.addColorStop(1.0, '#00ff00')
  19. this.offContext.fillStyle = grad
  20. this.offContext.fillRect(0, 0, 400, 400)
  21. var image = this.offContext.transferToImageBitmap()
  22. this.context.transferFromImageBitmap(image)
  23. })
  24. }
  25. .width('100%')
  26. .height('100%')
  27. }
  28. }

createRadialGradient

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

創(chuàng)建一個徑向漸變色。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認值

描述

x0

number

0

起始圓的x軸坐標。

y0

number

0

起始圓的y軸坐標。

r0

number

0

起始圓的半徑。必須是非負且有限的。

x1

number

0

終點圓的x軸坐標。

y1

number

0

終點圓的y軸坐標。

r1

number

0

終點圓的半徑。必須為非負且有限的。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CreateRadialGradient {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width('100%')
  12. .height('100%')
  13. .backgroundColor('#ffff00')
  14. .onReady(() =>{
  15. var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
  16. grad.addColorStop(0.0, '#ff0000')
  17. grad.addColorStop(0.5, '#ffffff')
  18. grad.addColorStop(1.0, '#00ff00')
  19. this.offContext.fillStyle = grad
  20. this.offContext.fillRect(0, 0, 400, 400)
  21. var image = this.offContext.transferToImageBitmap()
  22. this.context.transferFromImageBitmap(image)
  23. })
  24. }
  25. .width('100%')
  26. .height('100%')
  27. }
  28. }

CanvasPattern

一個Object對象, 通過createPattern方法創(chuàng)建。

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號