畫(huà)布上進(jìn)行繪制

2024-01-22 18:10 更新

使用RenderingContext在Canvas組件上進(jìn)行繪制,繪制對(duì)象可以是矩形、文本、圖片等。

說(shuō)明

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

接口

CanvasRenderingContext2D(settings?: RenderingContextSetting)

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

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

settings

RenderingContextSettings

見(jiàn)RenderingContextSettings

RenderingContextSettings

RenderingContextSettings(antialias?: boolean)

用來(lái)配置CanvasRenderingContext2D對(duì)象的參數(shù),包括是否開(kāi)啟抗鋸齒。

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

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

antialias

boolean

表明canvas是否開(kāi)啟抗鋸齒。

默認(rèn)值:false

屬性

名稱

類型

描述

fillStyle

string | CanvasGradient | CanvasPattern

指定繪制的填充色。

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

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

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

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

lineWidth

number

設(shè)置繪制線條的寬度。

strokeStyle

string | CanvasGradient | CanvasPattern

設(shè)置描邊的顏色。

- 類型為string時(shí),表示設(shè)置描邊使用的顏色。

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

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

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

lineCap

CanvasLineCap

指定線端點(diǎn)的樣式,可選值為:

- 'butt':線端點(diǎn)以方形結(jié)束。

- 'round':線端點(diǎn)以圓形結(jié)束。

- 'square':線端點(diǎn)以方形結(jié)束,該樣式下會(huì)增加一個(gè)長(zhǎng)度和線段厚度相同,寬度是線段厚度一半的矩形。

默認(rèn)值:'butt'

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

lineJoin

CanvasLineJoin

指定線段間相交的交點(diǎn)樣式,可選值為:

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

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

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

默認(rèn)值:'miter'

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

miterLimit

number

設(shè)置斜接面限制值,該值指定了線條相交處內(nèi)角和外角的距離。

默認(rèn)值:10

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

font

string

設(shè)置文本繪制中的字體樣式。

語(yǔ)法:ctx.font='font-size font-family'

- font-size(可選),指定字號(hào)和行高,單位只支持px。

- font-family(可選),指定字體系列。

語(yǔ)法:ctx.font='font-style font-weight font-size font-family'

- font-style(可選),用于指定字體樣式,支持如下幾種樣式:'normal','italic'。

- font-weight(可選),用于指定字體的粗細(xì),支持如下幾種類型:'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。

- font-size(可選),指定字號(hào)和行高,單位只支持px。

- font-family(可選),指定字體系列,支持如下幾種類型:'sans-serif', 'serif', 'monospace'。

默認(rèn)值:'normal normal 14px sans-serif'

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

textAlign

CanvasTextAlign

設(shè)置文本繪制中的文本對(duì)齊方式,可選值為:

- 'left':文本左對(duì)齊。

- 'right':文本右對(duì)齊。

- 'center':文本居中對(duì)齊。

- 'start':文本對(duì)齊界線開(kāi)始的地方。

- 'end':文本對(duì)齊界線結(jié)束的地方。

ltr布局模式下'start'和'left'一致,rtl布局模式下'start'和'right'一致·。

默認(rèn)值:'left'

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

textBaseline

CanvasTextBaseline

設(shè)置文本繪制中的水平對(duì)齊方式,可選值為:

- 'alphabetic':文本基線是標(biāo)準(zhǔn)的字母基線。

- 'top':文本基線在文本塊的頂部。

- 'hanging':文本基線是懸掛基線。

- 'middle':文本基線在文本塊的中間。

- 'ideographic':文字基線是表意字基線;如果字符本身超出了alphabetic基線,那么ideograhpic基線位置在字符本身的底部。

- 'bottom':文本基線在文本塊的底部。 與ideographic基線的區(qū)別在于ideographic基線不需要考慮下行字母。

默認(rèn)值:'alphabetic'

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

globalAlpha

number

設(shè)置透明度,0.0為完全透明,1.0為完全不透明。

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

lineDashOffset

number

設(shè)置畫(huà)布的虛線偏移量,精度為float。

默認(rèn)值:0.0

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

globalCompositeOperation

string

設(shè)置合成操作的方式。類型字段可選值有'source-over','source-atop','source-in','source-out','destination-over','destination-atop','destination-in','destination-out','lighter','copy','xor'。

默認(rèn)值:'source-over'

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

shadowBlur

number

設(shè)置繪制陰影時(shí)的模糊級(jí)別,值越大越模糊,精度為float。

默認(rèn)值:0.0

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

shadowColor

string

設(shè)置繪制陰影時(shí)的陰影顏色。

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

shadowOffsetX

number

設(shè)置繪制陰影時(shí)和原有對(duì)象的水平偏移值。

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

shadowOffsetY

number

設(shè)置繪制陰影時(shí)和原有對(duì)象的垂直偏移值。

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

imageSmoothingEnabled

boolean

用于設(shè)置繪制圖片時(shí)是否進(jìn)行圖像平滑度調(diào)整,true為啟用,false為不啟用。

默認(rèn)值:true

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

height

number

組件高度。

單位:vp

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

width

number

組件寬度。

單位:vp

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

說(shuō)明

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. 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.context.fillStyle = '#0000ff'
  15. this.context.fillRect(20, 20, 150, 100)
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

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. 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.context.lineWidth = 5
  15. this.context.strokeRect(25, 25, 85, 105)
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

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. 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.context.lineWidth = 10
  15. this.context.strokeStyle = '#0000ff'
  16. this.context.strokeRect(25, 25, 155, 105)
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

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. 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.context.lineWidth = 8
  15. this.context.beginPath()
  16. this.context.lineCap = 'round'
  17. this.context.moveTo(30, 50)
  18. this.context.lineTo(220, 50)
  19. this.context.stroke()
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

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. 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.context.beginPath()
  15. this.context.lineWidth = 8
  16. this.context.lineJoin = 'miter'
  17. this.context.moveTo(30, 30)
  18. this.context.lineTo(120, 60)
  19. this.context.lineTo(30, 110)
  20. this.context.stroke()
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

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. 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.context.lineWidth = 8
  15. this.context.lineJoin = 'miter'
  16. this.context.miterLimit = 3
  17. this.context.moveTo(30, 30)
  18. this.context.lineTo(60, 35)
  19. this.context.lineTo(30, 37)
  20. this.context.stroke()
  21. })
  22. }
  23. .width('100%')
  24. .height('100%')
  25. }
  26. }

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. 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.context.font = '30px sans-serif'
  15. this.context.fillText("Hello World", 20, 60)
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

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. 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.context.strokeStyle = '#0000ff'
  15. this.context.moveTo(140, 10)
  16. this.context.lineTo(140, 160)
  17. this.context.stroke()
  18. this.context.font = '18px sans-serif'
  19. this.context.textAlign = 'start'
  20. this.context.fillText('textAlign=start', 140, 60)
  21. this.context.textAlign = 'end'
  22. this.context.fillText('textAlign=end', 140, 80)
  23. this.context.textAlign = 'left'
  24. this.context.fillText('textAlign=left', 140, 100)
  25. this.context.textAlign = 'center'
  26. this.context.fillText('textAlign=center',140, 120)
  27. this.context.textAlign = 'right'
  28. this.context.fillText('textAlign=right',140, 140)
  29. })
  30. }
  31. .width('100%')
  32. .height('100%')
  33. }
  34. }

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. 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.context.strokeStyle = '#0000ff'
  15. this.context.moveTo(0, 120)
  16. this.context.lineTo(400, 120)
  17. this.context.stroke()
  18. this.context.font = '20px sans-serif'
  19. this.context.textBaseline = 'top'
  20. this.context.fillText('Top', 10, 120)
  21. this.context.textBaseline = 'bottom'
  22. this.context.fillText('Bottom', 55, 120)
  23. this.context.textBaseline = 'middle'
  24. this.context.fillText('Middle', 125, 120)
  25. this.context.textBaseline = 'alphabetic'
  26. this.context.fillText('Alphabetic', 195, 120)
  27. this.context.textBaseline = 'hanging'
  28. this.context.fillText('Hanging', 295, 120)
  29. })
  30. }
  31. .width('100%')
  32. .height('100%')
  33. }
  34. }

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. 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.context.fillStyle = 'rgb(0,0,255)'
  15. this.context.fillRect(0, 0, 50, 50)
  16. this.context.globalAlpha = 0.4
  17. this.context.fillStyle = 'rgb(0,0,255)'
  18. this.context.fillRect(50, 50, 50, 50)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

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. 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.context.arc(100, 75, 50, 0, 6.28)
  15. this.context.setLineDash([10,20])
  16. this.context.lineDashOffset = 10.0
  17. this.context.stroke()
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

globalCompositeOperation

名稱

描述

source-over

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

source-atop

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

source-in

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

source-out

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

destination-over

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

destination-atop

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

destination-in

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

destination-out

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

lighter

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

copy

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

xor

使用異或操作對(duì)新繪制內(nèi)容與現(xiàn)有繪制內(nèi)容進(jì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. 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.context.fillStyle = 'rgb(255,0,0)'
  15. this.context.fillRect(20, 20, 50, 50)
  16. this.context.globalCompositeOperation = 'source-over'
  17. this.context.fillStyle = 'rgb(0,0,255)'
  18. this.context.fillRect(50, 50, 50, 50)
  19. this.context.fillStyle = 'rgb(255,0,0)'
  20. this.context.fillRect(120, 20, 50, 50)
  21. this.context.globalCompositeOperation = 'destination-over'
  22. this.context.fillStyle = 'rgb(0,0,255)'
  23. this.context.fillRect(150, 50, 50, 50)
  24. })
  25. }
  26. .width('100%')
  27. .height('100%')
  28. }
  29. }

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. 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.context.shadowBlur = 30
  15. this.context.shadowColor = 'rgb(0,0,0)'
  16. this.context.fillStyle = 'rgb(255,0,0)'
  17. this.context.fillRect(20, 20, 100, 80)
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

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. 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.context.shadowBlur = 30
  15. this.context.shadowColor = 'rgb(0,0,255)'
  16. this.context.fillStyle = 'rgb(255,0,0)'
  17. this.context.fillRect(30, 30, 100, 100)
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

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. 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.context.shadowBlur = 10
  15. this.context.shadowOffsetX = 20
  16. this.context.shadowColor = 'rgb(0,0,0)'
  17. this.context.fillStyle = 'rgb(255,0,0)'
  18. this.context.fillRect(20, 20, 100, 80)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

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. 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.context.shadowBlur = 10
  15. this.context.shadowOffsetY = 20
  16. this.context.shadowColor = 'rgb(0,0,0)'
  17. this.context.fillStyle = 'rgb(255,0,0)'
  18. this.context.fillRect(30, 30, 100, 100)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

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. 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.context.imageSmoothingEnabled = false
  16. this.context.drawImage( this.img,0,0,400,200)
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

height

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

width

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

方法

fillRect

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

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

填充一個(gè)矩形。

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

x

number

0

指定矩形左上角點(diǎn)的x坐標(biāo)。

y

number

0

指定矩形左上角點(diǎn)的y坐標(biāo)。

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. 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.context.fillRect(30,30,100,100)
  15. })
  16. }
  17. .width('100%')
  18. .height('100%')
  19. }
  20. }

strokeRect

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

繪制具有邊框的矩形,矩形內(nèi)部不填充。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

x

number

0

指定矩形的左上角x坐標(biāo)。

y

number

0

指定矩形的左上角y坐標(biāo)。

w

number

0

指定矩形的寬度。

h

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. 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.context.strokeRect(30, 30, 200, 150)
  15. })
  16. }
  17. .width('100%')
  18. .height('100%')
  19. }
  20. }

clearRect

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x

number

0

指定矩形上的左上角x坐標(biāo)。

y

number

0

指定矩形上的左上角y坐標(biāo)。

w

number

0

指定矩形的寬度。

h

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. 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.context.fillStyle = 'rgb(0,0,255)'
  15. this.context.fillRect(20,20,200,200)
  16. this.context.clearRect(30,30,150,100)
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

fillText

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

繪制填充類文本。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

text

string

''

需要繪制的文本內(nèi)容。

x

number

0

需要繪制的文本的左下角x坐標(biāo)。

y

number

0

需要繪制的文本的左下角y坐標(biāo)。

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. 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.context.font = '30px sans-serif'
  15. this.context.fillText("Hello World!", 20, 100)
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

strokeText

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

繪制描邊類文本。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

text

string

''

需要繪制的文本內(nèi)容。

x

number

0

需要繪制的文本的左下角x坐標(biāo)。

y

number

0

需要繪制的文本的左下角y坐標(biāo)。

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. 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.context.font = '55px sans-serif'
  15. this.context.strokeText("Hello World!", 20, 60)
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

measureText

measureText(text: string): TextMetrics

該方法返回一個(gè)文本測(cè)算的對(duì)象,通過(guò)該對(duì)象可以獲取指定文本的寬度值。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

text

string

''

需要進(jìn)行測(cè)量的文本。

返回值:

類型

說(shuō)明

TextMetrics

文本的尺寸信息。

TextMetrics類型描述:

屬性

類型

描述

width

number

字符串的寬度。

height

number

字符串的高度。

actualBoundingBoxAscent

number

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

actualBoundingBoxDescent

number

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

actualBoundingBoxLeft

number

平行于基線,從CanvasRenderingContext2D.textAlign 屬性確定的對(duì)齊點(diǎn)到文本矩形邊界左側(cè)的距離,當(dāng)前值為0。

actualBoundingBoxRight

number

平行于基線,從CanvasRenderingContext2D.textAlign 屬性確定的對(duì)齊點(diǎn)到文本矩形邊界右側(cè)的距離,當(dāng)前值為0。

alphabeticBaseline

number

從CanvasRenderingContext2D.textBaseline 屬性標(biāo)明的水平線到線框的 alphabetic 基線的距離,當(dāng)前值為0。

emHeightAscent

number

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

emHeightDescent

number

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

fontBoundingBoxAscent

number

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

fontBoundingBoxDescent

number

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

hangingBaseline

number

從CanvasRenderingContext2D.textBaseline 屬性標(biāo)明的水平線到線框的 hanging 基線的距離,當(dāng)前值為0。

ideographicBaseline

number

從CanvasRenderingContext2D.textBaseline 屬性標(biāo)明的水平線到線框的 ideographic 基線的距離,當(dāng)前值為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. 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.context.font = '50px sans-serif'
  15. this.context.fillText("Hello World!", 20, 100)
  16. this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

stroke

stroke(path?: Path2D): void

進(jìn)行邊框繪制操作。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

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. 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.context.moveTo(25, 25)
  15. this.context.lineTo(25, 105)
  16. this.context.lineTo(75, 105)
  17. this.context.lineTo(75, 25)
  18. this.context.strokeStyle = 'rgb(0,0,255)'
  19. this.context.stroke()
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

beginPath

beginPath(): void

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

從API version 9開(kāi)始,該接口支持在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. 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.context.beginPath()
  15. this.context.lineWidth = 6
  16. this.context.strokeStyle = '#0000ff'
  17. this.context.moveTo(15, 80)
  18. this.context.lineTo(280, 160)
  19. this.context.stroke()
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

moveTo

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

路徑從當(dāng)前點(diǎn)移動(dòng)到指定點(diǎn)。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

x

number

0

指定位置的x坐標(biāo)。

y

number

0

指定位置的y坐標(biāo)。

示例:

  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. 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.context.beginPath()
  15. this.context.moveTo(10, 10)
  16. this.context.lineTo(280, 160)
  17. this.context.stroke()
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

lineTo

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

從當(dāng)前點(diǎn)到指定點(diǎn)進(jìn)行路徑連接。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x

number

0

指定位置的x坐標(biāo)。

y

number

0

指定位置的y坐標(biāo)。

示例:

  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. 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.context.beginPath()
  15. this.context.moveTo(10, 10)
  16. this.context.lineTo(280, 160)
  17. this.context.stroke()
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

closePath

closePath(): void

結(jié)束當(dāng)前路徑形成一個(gè)封閉路徑。

從API version 9開(kāi)始,該接口支持在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. 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.context.beginPath()
  15. this.context.moveTo(30, 30)
  16. this.context.lineTo(110, 30)
  17. this.context.lineTo(70, 90)
  18. this.context.closePath()
  19. this.context.stroke()
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

createPattern

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

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

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

參數(shù):

參數(shù)

類型

必填

描述

image

ImageBitmap

圖源對(duì)象,具體參考ImageBitmap對(duì)象。

repetition

string

設(shè)置圖像重復(fù)的方式,取值為:'repeat'、'repeat-x'、&nbsp'repeat-y'、'no-repeat'。

默認(rèn)值:''

返回值:

類型

說(shuō)明

CanvasPattern

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

示例:

  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. 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 pattern = this.context.createPattern(this.img, 'repeat')
  16. this.context.fillStyle = pattern
  17. this.context.fillRect(0, 0, 200, 200)
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

bezierCurveTo

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

cp1x

number

0

第一個(gè)貝塞爾參數(shù)的x坐標(biāo)值。

cp1y

number

0

第一個(gè)貝塞爾參數(shù)的y坐標(biāo)值。

cp2x

number

0

第二個(gè)貝塞爾參數(shù)的x坐標(biāo)值。

cp2y

number

0

第二個(gè)貝塞爾參數(shù)的y坐標(biāo)值。

x

number

0

路徑結(jié)束時(shí)的x坐標(biāo)值。

y

number

0

路徑結(jié)束時(shí)的y坐標(biāo)值。

示例:

  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. 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.context.beginPath()
  15. this.context.moveTo(10, 10)
  16. this.context.bezierCurveTo(20, 100, 200, 100, 200, 20)
  17. this.context.stroke()
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

quadraticCurveTo

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

cpx

number

0

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

cpy

number

0

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

x

number

0

路徑結(jié)束時(shí)的x坐標(biāo)值。

y

number

0

路徑結(jié)束時(shí)的y坐標(biāo)值。

示例:

  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. 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.context.beginPath()
  15. this.context.moveTo(20, 20)
  16. this.context.quadraticCurveTo(100, 100, 200, 20)
  17. this.context.stroke()
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

arc

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

繪制弧線路徑。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x

number

0

弧線圓心的x坐標(biāo)值。

y

number

0

弧線圓心的y坐標(biāo)值。

radius

number

0

弧線的圓半徑。

startAngle

number

0

弧線的起始弧度。

endAngle

number

0

弧線的終止弧度。

counterclockwise

boolean

false

是否逆時(shí)針繪制圓弧。

示例:

  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. 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.context.beginPath()
  15. this.context.arc(100, 75, 50, 0, 6.28)
  16. this.context.stroke()
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

arcTo

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x1

number

0

圓弧經(jīng)過(guò)的第一個(gè)點(diǎn)的x坐標(biāo)值。

y1

number

0

圓弧經(jīng)過(guò)的第一個(gè)點(diǎn)的y坐標(biāo)值。

x2

number

0

圓弧經(jīng)過(guò)的第二個(gè)點(diǎn)的x坐標(biāo)值。

y2

number

0

圓弧經(jīng)過(guò)的第二個(gè)點(diǎn)的y坐標(biāo)值。

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. 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.context.moveTo(100, 20)
  15. this.context.arcTo(150, 20, 150, 70, 50)
  16. this.context.stroke()
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

ellipse

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

x

number

0

橢圓圓心的x軸坐標(biāo)。

y

number

0

橢圓圓心的y軸坐標(biāo)。

radiusX

number

0

橢圓x軸的半徑長(zhǎng)度。

radiusY

number

0

橢圓y軸的半徑長(zhǎng)度。

rotation

number

0

橢圓的旋轉(zhuǎn)角度,單位為弧度。

startAngle

number

0

橢圓繪制的起始點(diǎn)角度,以弧度表示。

endAngle

number

0

橢圓繪制的結(jié)束點(diǎn)角度,以弧度表示。

counterclockwise

boolean

false

是否以逆時(shí)針?lè)较蚶L制橢圓。

true:逆時(shí)針?lè)较蚶L制橢圓。

false:順時(shí)針?lè)较蚶L制橢圓。

示例:

  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. 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.context.beginPath()
  15. this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false)
  16. this.context.stroke()
  17. this.context.beginPath()
  18. this.context.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true)
  19. this.context.stroke()
  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開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x

number

0

指定矩形的左上角x坐標(biāo)值。

y

number

0

指定矩形的左上角y坐標(biāo)值。

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. 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.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
  15. this.context.stroke()
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

fill

fill(fillRule?: CanvasFillRule): void

對(duì)封閉路徑進(jìn)行填充。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

fillRule

CanvasFillRule

"nonzero"

指定要填充對(duì)象的規(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. 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.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
  15. this.context.fill()
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

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

對(duì)封閉路徑進(jìn)行填充。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

path

Path2D

 

Path2D填充路徑。

fillRule

CanvasFillRule

"nonzero"

指定要填充對(duì)象的規(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. 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. let region = new Path2D()
  15. region.moveTo(30, 90)
  16. region.lineTo(110, 20)
  17. region.lineTo(240, 130)
  18. region.lineTo(60, 130)
  19. region.lineTo(190, 20)
  20. region.lineTo(270, 90)
  21. region.closePath()
  22. // Fill path
  23. this.context.fillStyle = '#00ff00'
  24. this.context.fill(region, "evenodd")
  25. })
  26. }
  27. .width('100%')
  28. .height('100%')
  29. }
  30. }

clip

clip(fillRule?: CanvasFillRule): void

設(shè)置當(dāng)前路徑為剪切路徑。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

fillRule

CanvasFillRule

"nonzero"

指定要剪切對(duì)象的規(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. 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.context.rect(0, 0, 100, 200)
  15. this.context.stroke()
  16. this.context.clip()
  17. this.context.fillStyle = "rgb(255,0,0)"
  18. this.context.fillRect(0, 0, 200, 200)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

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

設(shè)置當(dāng)前路徑為剪切路徑

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

path

Path2D

-

Path2D剪切路徑。

fillRule

CanvasFillRule

"nonzero"

指定要剪切對(duì)象的規(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. 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. let region = new Path2D()
  15. region.moveTo(30, 90)
  16. region.lineTo(110, 20)
  17. region.lineTo(240, 130)
  18. region.lineTo(60, 130)
  19. region.lineTo(190, 20)
  20. region.lineTo(270, 90)
  21. region.closePath()
  22. this.context.clip(region,"evenodd")
  23. this.context.fillStyle = "rgb(0,255,0)"
  24. this.context.fillRect(0, 0, this.context.width, this.context.height)
  25. })
  26. }
  27. .width('100%')
  28. .height('100%')
  29. }
  30. }

filter

filter(filter: string): void

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

filter

string

-

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

getTransform

getTransform(): Matrix2D

獲取當(dāng)前被應(yīng)用到上下文的轉(zhuǎn)換矩陣。該接口為空接口。

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

resetTransform

resetTransform(): void

使用單位矩陣重新設(shè)置當(dāng)前變形。該接口為空接口。

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

direction

direction(direction: CanvasDirection): void

繪制文本時(shí),描述當(dāng)前文本方向的屬性。該接口為空接口。

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

rotate

rotate(angle: number): void

針對(duì)當(dāng)前坐標(biāo)軸進(jìn)行順時(shí)針旋轉(zhuǎn)。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

angle

number

0

設(shè)置順時(shí)針旋轉(zhuǎn)的弧度值,可以通過(guò)Math.PI / 180將角度轉(zhuǎn)換為弧度值。

示例:

  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. 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.context.rotate(45 * Math.PI / 180)
  15. this.context.fillRect(70, 20, 50, 50)
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

scale

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x

number

0

設(shè)置水平方向的縮放值。

y

number

0

設(shè)置垂直方向的縮放值。

示例:

  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. 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.context.lineWidth = 3
  15. this.context.strokeRect(30, 30, 50, 50)
  16. this.context.scale(2, 2) // Scale to 200%
  17. this.context.strokeRect(30, 30, 50, 50)
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

transform

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

transform方法對(duì)應(yīng)一個(gè)變換矩陣,想對(duì)一個(gè)圖形進(jìn)行變化的時(shí)候,只要設(shè)置此變換矩陣相應(yīng)的參數(shù),對(duì)圖形的各個(gè)定點(diǎn)的坐標(biāo)分別乘以這個(gè)矩陣,就能得到新的定點(diǎn)的坐標(biāo)。矩陣變換效果可疊加。

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

說(shuō)明

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

a

number

0

scaleX: 指定水平縮放值。

b

number

0

skewX: 指定水平傾斜值。

c

number

0

skewY: 指定垂直傾斜值。

d

number

0

scaleY: 指定垂直縮放值。

e

number

0

translateX: 指定水平移動(dòng)值。

f

number

0

translateY: 指定垂直移動(dòng)值。

示例:

  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. 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.context.fillStyle = 'rgb(0,0,0)'
  15. this.context.fillRect(0, 0, 100, 100)
  16. this.context.transform(1, 0.5, -0.5, 1, 10, 10)
  17. this.context.fillStyle = 'rgb(255,0,0)'
  18. this.context.fillRect(0, 0, 100, 100)
  19. this.context.transform(1, 0.5, -0.5, 1, 10, 10)
  20. this.context.fillStyle = 'rgb(0,0,255)'
  21. this.context.fillRect(0, 0, 100, 100)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

setTransform

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

a

number

0

scaleX: 指定水平縮放值。

b

number

0

skewX: 指定水平傾斜值。

c

number

0

skewY: 指定垂直傾斜值。

d

number

0

scaleY: 指定垂直縮放值。

e

number

0

translateX: 指定水平移動(dòng)值。

f

number

0

translateY: 指定垂直移動(dòng)值。

示例:

  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. 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.context.fillStyle = 'rgb(255,0,0)'
  15. this.context.fillRect(0, 0, 100, 100)
  16. this.context.setTransform(1,0.5, -0.5, 1, 10, 10)
  17. this.context.fillStyle = 'rgb(0,0,255)'
  18. this.context.fillRect(0, 0, 100, 100)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

setTransform(transform?: Matrix2D): void

以Matrix2D對(duì)象為模板重置現(xiàn)有的變換矩陣并創(chuàng)建新的變換矩陣。該接口為空接口。

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

translate

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

移動(dòng)當(dāng)前坐標(biāo)系的原點(diǎn)。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x

number

0

設(shè)置水平平移量。

y

number

0

設(shè)置豎直平移量。

示例:

  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. 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.context.fillRect(10, 10, 50, 50)
  15. this.context.translate(70, 70)
  16. this.context.fillRect(10, 10, 50, 50)
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

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

進(jìn)行圖像繪制。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

image

ImageBitmapPixelMap

null

圖片資源,請(qǐng)參考ImageBitmap或PixelMap。

sx

number

0

裁切源圖像時(shí)距離源圖像左上角的x坐標(biāo)值。

sy

number

0

裁切源圖像時(shí)距離源圖像左上角的y坐標(biāo)值。

sw

number

0

裁切源圖像時(shí)需要裁切的寬度。

sh

number

0

裁切源圖像時(shí)需要裁切的高度。

dx

number

0

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

dy

number

0

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

dw

number

0

繪制區(qū)域的寬度。當(dāng)繪制區(qū)域的寬度和裁剪圖像的寬度不一致時(shí),將圖像寬度拉伸或壓縮為繪制區(qū)域的寬度。

dh

number

0

繪制區(qū)域的高度。當(dāng)繪制區(qū)域的高度和裁剪圖像的高度不一致時(shí),將圖像高度拉伸或壓縮為繪制區(qū)域的高度。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ImageExample {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7. private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
  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.context.drawImage( this.img,0,0,500,500,0,0,400,200)
  16. })
  17. }
  18. .width('100%')
  19. .height('100%')
  20. }
  21. }

createImageData

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

創(chuàng)建新的ImageData 對(duì)象,請(qǐng)參考ImageData。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)

描述

sw

number

0

ImageData的寬度。

sh

number

0

ImageData的高度。

createImageData(imageData: ImageData): ImageData

創(chuàng)建新的ImageData 對(duì)象,請(qǐng)參考ImageData。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)

描述

imagedata

ImageData

null

復(fù)制現(xiàn)有的ImageData對(duì)象。

返回值:

類型

說(shuō)明

ImageData

新的ImageData對(duì)象。

getPixelMap

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

以當(dāng)前canvas指定區(qū)域內(nèi)的像素創(chuàng)建PixelMap對(duì)象。

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

sx

number

0

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

sy

number

0

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

sw

number

0

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

sh

number

0

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

返回值:

類型

說(shuō)明

PixelMap

新的PixelMap對(duì)象。

getImageData

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

以當(dāng)前canvas指定區(qū)域內(nèi)的像素創(chuàng)建ImageData對(duì)象。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

sx

number

0

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

sy

number

0

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

sw

number

0

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

sh

number

0

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

返回值:

類型

說(shuō)明

ImageData

新的ImageData對(duì)象。

示例:

  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 img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
  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.context.drawImage(this.img,0,0,130,130)
  16. var imagedata = this.context.getImageData(50,50,130,130)
  17. this.context.putImageData(imagedata,150,150)
  18. })
  19. }
  20. .width('100%')
  21. .height('100%')
  22. }
  23. }

putImageData

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

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

使用ImageData數(shù)據(jù)填充新的矩形區(qū)域。

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

imagedata

ImageData

null

包含像素值的ImageData對(duì)象。

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. 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. var imageData = this.context.createImageData(100, 100)
  15. for (var i = 0; i < imageData.data.length; i += 4) {
  16. imageData.data[i + 0] = 255
  17. imageData.data[i + 1] = 0
  18. imageData.data[i + 2] = 255
  19. imageData.data[i + 3] = 255
  20. }
  21. this.context.putImageData(imageData, 10, 10)
  22. })
  23. }
  24. .width('100%')
  25. .height('100%')
  26. }
  27. }

setLineDash

setLineDash(segments: number[]): void

設(shè)置畫(huà)布的虛線樣式。

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

參數(shù):

參數(shù)

類型

描述

segments

number[]

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

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct SetLineDash {
  5. private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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.context.arc(100, 75, 50, 0, 6.28)
  15. this.context.setLineDash([10,20])
  16. this.context.stroke()
  17. })
  18. }
  19. .width('100%')
  20. .height('100%')
  21. }
  22. }

getLineDash

getLineDash(): number[]

獲得當(dāng)前畫(huà)布的虛線樣式。

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

返回值:

類型

說(shuō)明

number[]

返回?cái)?shù)組,該數(shù)組用來(lái)描述線段如何交替和間距長(zhǎng)度。

示例:

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

imageSmoothingQuality

imageSmoothingQuality(quality: imageSmoothingQuality)

用于設(shè)置圖像平滑度。該接口為空接口。

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

參數(shù):

參數(shù)

類型

描述

quality

imageSmoothingQuality

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

transferFromImageBitmap

transferFromImageBitmap(bitmap: ImageBitmap): void

顯示給定的ImageBitmap對(duì)象。

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

參數(shù):

參數(shù)

類型

描述

bitmap

ImageBitmap

待顯示的ImageBitmap對(duì)象。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TransferFromImageBitmap {
  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. }

toDataURL

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

生成一個(gè)包含圖片展示的URL。

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

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

參數(shù):

參數(shù)名

參數(shù)類型

必填

默認(rèn)值

描述

type

string

"image/png"

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

quality

number

0.92

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

返回值:

類型

說(shuō)明

string

圖像的URL地址。

示例:

  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. @State toDataURL: string = ""
  8. build() {
  9. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  10. Canvas(this.context)
  11. .width(100)
  12. .height(100)
  13. .onReady(() =>{
  14. this.context.fillStyle = "#00ff00"
  15. this.context.fillRect(0,0,100,100)
  16. this.toDataURL = this.context.toDataURL("image/png", 0.92)
  17. })
  18. Text(this.toDataURL)
  19. }
  20. .width('100%')
  21. .height('100%')
  22. .backgroundColor('#ffff00')
  23. }
  24. }

restore

restore(): void

對(duì)保存的繪圖上下文進(jìn)行恢復(fù)。

從API version 9開(kāi)始,該接口支持在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. 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.context.save() // save the default state
  15. this.context.fillStyle = "#00ff00"
  16. this.context.fillRect(20, 20, 100, 100)
  17. this.context.restore() // restore to the default state
  18. this.context.fillRect(150, 75, 100, 100)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

save

save(): void

將當(dāng)前狀態(tài)放入棧中,保存canvas的全部狀態(tài),通常在需要保存繪制狀態(tài)時(shí)調(diào)用。

從API version 9開(kāi)始,該接口支持在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. 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.context.save() // save the default state
  15. this.context.fillStyle = "#00ff00"
  16. this.context.fillRect(20, 20, 100, 100)
  17. this.context.restore() // restore to the default state
  18. this.context.fillRect(150, 75, 100, 100)
  19. })
  20. }
  21. .width('100%')
  22. .height('100%')
  23. }
  24. }

createLinearGradient

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x0

number

0

起點(diǎn)的x軸坐標(biāo)。

y0

number

0

起點(diǎn)的y軸坐標(biāo)。

x1

number

0

終點(diǎn)的x軸坐標(biāo)。

y1

number

0

終點(diǎn)的y軸坐標(biāo)。

示例:

  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. 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. var grad = this.context.createLinearGradient(50,0, 300,100)
  15. grad.addColorStop(0.0, '#ff0000')
  16. grad.addColorStop(0.5, '#ffffff')
  17. grad.addColorStop(1.0, '#00ff00')
  18. this.context.fillStyle = grad
  19. this.context.fillRect(0, 0, 400, 400)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

createRadialGradient

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

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

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

參數(shù):

參數(shù)

類型

必填

默認(rèn)值

描述

x0

number

0

起始圓的x軸坐標(biāo)。

y0

number

0

起始圓的y軸坐標(biāo)。

r0

number

0

起始圓的半徑。必須是非負(fù)且有限的。

x1

number

0

終點(diǎn)圓的x軸坐標(biāo)。

y1

number

0

終點(diǎn)圓的y軸坐標(biāo)。

r1

number

0

終點(diǎn)圓的半徑。必須為非負(fù)且有限的。

示例:

  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. 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. var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
  15. grad.addColorStop(0.0, '#ff0000')
  16. grad.addColorStop(0.5, '#ffffff')
  17. grad.addColorStop(1.0, '#00ff00')
  18. this.context.fillStyle = grad
  19. this.context.fillRect(0, 0, 400, 400)
  20. })
  21. }
  22. .width('100%')
  23. .height('100%')
  24. }
  25. }

CanvasPattern

一個(gè)Object對(duì)象, 通過(guò)createPattern方法創(chuàng)建。

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

CanvasDirection

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

名稱

描述

inherit

繼承canvas組件已設(shè)定的文本方向。

ltr

從左往右。

rtl

從右往左。

CanvasFillRule

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

名稱

描述

evenodd

奇偶規(guī)則。

nonzero

非零規(guī)則。

CanvasLineCap

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

名稱

描述

butt

線條兩端為平行線,不額外擴(kuò)展。

round

在線條兩端延伸半個(gè)圓,直徑等于線寬。

square

在線條兩端延伸一個(gè)矩形,寬度等于線寬的一半,高度等于線寬。

CanvasLineJoin

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

名稱

描述

bevel

在線段相連處使用三角形為底填充, 每個(gè)部分矩形拐角獨(dú)立。

miter

在相連部分的外邊緣處進(jìn)行延伸,使其相交于一點(diǎn),形成一個(gè)菱形區(qū)域,該屬性可以通過(guò)設(shè)置miterLimit屬性展現(xiàn)效果。

round

在線段相連處繪制一個(gè)扇形,扇形的圓角半徑是線段的寬度。

CanvasTextAlign

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

名稱

描述

center

文本居中對(duì)齊。

start

文本對(duì)齊界線開(kāi)始的地方。

end

文本對(duì)齊界線結(jié)束的地方。

left

文本左對(duì)齊。

right

文本右對(duì)齊。

CanvasTextBaseline

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

名稱

描述

alphabetic

文本基線是標(biāo)準(zhǔn)的字母基線。

bottom

文本基線在文本塊的底部。 與ideographic基線的區(qū)別在于ideographic基線不需要考慮下行字母。

hanging

文本基線是懸掛基線。

ideographic

文字基線是表意字基線;如果字符本身超出了alphabetic基線,那么ideograhpic基線位置在字符本身的底部。

middle

文本基線在文本塊的中間。

top

文本基線在文本塊的頂部。

ImageSmoothingQuality

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

名稱

描述

low

低畫(huà)質(zhì)

medium

中畫(huà)質(zhì)

high

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)