当前位置： 首页 > news >正文

鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：OffscreenCanvasRenderingContext2D）

news 文章来源：https://blog.csdn.net/m0_64420071/article/details/136842631 2025/1/31 15:11:24

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

说明：

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

接口

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

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

参数：

参数名参数类型必填参数描述
widthnumber是离屏画布的宽度，单位：vp。
heightnumber是离屏画布的高度，单位：vp。
settingsRenderingContextSettings否用来配置OffscreenCanvasRenderingContext2D对象的参数，见RenderingContextSettings接口描述。

属性

名称类型描述
fillStylestring |number10+ |CanvasGradient | CanvasPattern指定绘制的填充色。
- 类型为string时，表示设置填充区域的颜色。
- 类型为number时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
- 类型为CanvasPattern时，使用createPattern方法创建。
从API version 9开始，该接口支持在ArkTS卡片中使用。
lineWidthnumber设置绘制线条的宽度。
单位：vp。
从API version 9开始，该接口支持在ArkTS卡片中使用。
linewidth取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。
strokeStylestring |number10+ |CanvasGradient | CanvasPattern设置线条的颜色。
- 类型为string时，表示设置线条使用的颜色。
- 类型为number时，表示设置线条使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
- 类型为CanvasPattern时，使用createPattern方法创建。
从API version 9开始，该接口支持在ArkTS卡片中使用。
lineCapCanvasLineCap指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
默认值：'butt'。
从API version 9开始，该接口支持在ArkTS卡片中使用。
lineJoinCanvasLineJoin指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
默认值：'miter'。
从API version 9开始，该接口支持在ArkTS卡片中使用。
miterLimitnumber设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
默认值：10。
单位：px。
miterLimit取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。
fontstring设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位支持px和vp。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位支持px、vp。使用时需要添加单位。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
默认值：'normal normal 14px sans-serif'
从API version 9开始，该接口支持在ArkTS卡片中使用。
textAlignCanvasTextAlign设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> 说明：
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。
默认值：'left'。
从API version 9开始，该接口支持在ArkTS卡片中使用。
textBaselineCanvasTextBaseline设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
默认值：'alphabetic'。
从API version 9开始，该接口支持在ArkTS卡片中使用。
globalAlphanumber设置透明度，0.0为完全透明，1.0为完全不透明。
默认值：1.0。
lineDashOffsetnumber设置画布的虚线偏移量，精度为float。
默认值：0.0。
单位：px。
从API version 9开始，该接口支持在ArkTS卡片中使用。
globalCompositeOperationstring设置合成操作的方式。类型字段可选值有'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卡片中使用。
shadowBlurnumber设置绘制阴影时的模糊级别，值越大越模糊，精度为float。
默认值：0.0。
shadowBlur取值不支持负数，负数按异常值处理，异常值按默认值处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。
shadowColorstring设置绘制阴影时的阴影颜色。
默认值：透明黑色。
从API version 9开始，该接口支持在ArkTS卡片中使用。
shadowOffsetXnumber设置绘制阴影时和原有对象的水平偏移值。
默认值：0。
单位：vp。
从API version 9开始，该接口支持在ArkTS卡片中使用。
shadowOffsetYnumber设置绘制阴影时和原有对象的垂直偏移值。
默认值：0。
单位：vp。
从API version 9开始，该接口支持在ArkTS卡片中使用。
imageSmoothingEnabledboolean用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
默认值：true。
从API version 9开始，该接口支持在ArkTS卡片中使用。
imageSmoothingQualityImageSmoothingQualityimageSmoothingEnabled为true时，用于设置图像平滑度。可选值为：
- 'low'：低画质
- 'medium'：中画质
- 'high'：高画质。
默认值：low
从API version 9开始，该接口支持在ArkTS卡片中使用。
directionCanvasDirection用于设置绘制文字时使用的文字方向。可选值为：
- 'inherit'：继承canvas组件已设定的文本方向
- 'ltr'：从左往右
- 'rtl'：从右往左。
默认值：inherit
从API version 9开始，该接口支持在ArkTS卡片中使用。
filterstring用于设置图像的滤镜。支持的滤镜效果如下：
- 'none': 无滤镜效果
- 'blur'：给图像设置高斯模糊
- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗
- 'contrast'：调整图像的对比度
- 'grayscale'：将图像转换为灰度图像
- 'hue-rotate'：给图像应用色相旋转
- 'invert'：反转输入图像
- 'opacity'：转化图像的透明程度
- 'saturate'：转换图像饱和度
- 'sepia'：将图像转换为深褐色
默认值：'none'
从API version 9开始，该接口支持在ArkTS卡片中使用。

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

fillStyle

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

zh-cn_image_0000001193872516

lineWidth

// xxx.ets
@Entry
@Component
struct LineWidthExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.lineWidth = 5offContext.strokeRect(25, 25, 85, 105)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238832403

strokeStyle

// xxx.ets
@Entry
@Component
struct StrokeStyleExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.lineWidth = 10offContext.strokeStyle = '#0000ff'offContext.strokeRect(25, 25, 155, 105)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}
// xxx.ets
@Entry
@Component
struct StrokeStyleExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.lineWidth = 10offContext.strokeStyle = 0x0000ffoffContext.strokeRect(25, 25, 155, 105)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238712437

lineCap

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

zh-cn_image_0000001194192454

lineJoin

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

zh-cn_image_0000001194352450

miterLimit

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

zh-cn_image_0000001238952397

font

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

zh-cn_image_0000001194032476

textAlign

// xxx.ets
@Entry
@Component
struct CanvasExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.strokeStyle = '#0000ff'offContext.moveTo(140, 10)offContext.lineTo(140, 160)offContext.stroke()offContext.font = '18px sans-serif'offContext.textAlign = 'start'offContext.fillText('textAlign=start', 140, 60)offContext.textAlign = 'end'offContext.fillText('textAlign=end', 140, 80)offContext.textAlign = 'left'offContext.fillText('textAlign=left', 140, 100)offContext.textAlign = 'center'offContext.fillText('textAlign=center',140, 120)offContext.textAlign = 'right'offContext.fillText('textAlign=right',140, 140)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001239032423

textBaseline

// xxx.ets
@Entry
@Component
struct TextBaseline {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.strokeStyle = '#0000ff'offContext.moveTo(0, 120)offContext.lineTo(400, 120)offContext.stroke()offContext.font = '20px sans-serif'offContext.textBaseline = 'top'offContext.fillText('Top', 10, 120)offContext.textBaseline = 'bottom'offContext.fillText('Bottom', 55, 120)offContext.textBaseline = 'middle'offContext.fillText('Middle', 125, 120)offContext.textBaseline = 'alphabetic'offContext.fillText('Alphabetic', 195, 120)offContext.textBaseline = 'hanging'offContext.fillText('Hanging', 295, 120)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001193872518

globalAlpha

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

zh-cn_image_0000001238832405

lineDashOffset

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

zh-cn_image_0000001238712439

globalCompositeOperation

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

zh-cn_image_0000001194192456

shadowBlur

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

zh-cn_image_0000001194352452

shadowColor

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

zh-cn_image_0000001238952399

shadowOffsetX

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

zh-cn_image_0000001194032478

shadowOffsetY

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

zh-cn_image_0000001239032425

imageSmoothingEnabled

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

zh-cn_image_0000001193872520

imageSmoothingQuality

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

ImageSmoothingQualityDemo

direction

  // xxx.ets@Entry@Componentstruct DirectionDemoOff {private settings: RenderingContextSettings = new RenderingContextSettings(true);private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.
settings);private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, 
justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)let offctx = offContextoffctx.font = '48px serif';offctx.textAlign = 'start'offctx.fillText("Hi ltr!", 200, 50);offctx.direction = "rtl";offctx.fillText("Hi rtl!", 200, 100);let image = offctx.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}}

directionDemo

filter

  // xxx.ets@Entry@Componentstruct FilterDemoOff {private settings: RenderingContextSettings = new RenderingContextSettings(true);private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.
Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)let offctx = offContextlet img = this.imgoffctx.drawImage(img, 0, 0, 100, 100);offctx.filter = 'grayscale(50%)';offctx.drawImage(img, 100, 0, 100, 100);offctx.filter = 'sepia(60%)';offctx.drawImage(img, 200, 0, 100, 100);offctx.filter = 'saturate(30%)';offctx.drawImage(img, 0, 100, 100, 100);offctx.filter = 'hue-rotate(90degree)';offctx.drawImage(img, 100, 100, 100, 100);offctx.filter = 'invert(100%)';offctx.drawImage(img, 200, 100, 100, 100);offctx.filter = 'opacity(25%)';offctx.drawImage(img, 0, 200, 100, 100);offctx.filter = 'brightness(0.4)';offctx.drawImage(img, 100, 200, 100, 100);offctx.filter = 'contrast(200%)';offctx.drawImage(img, 200, 200, 100, 100);offctx.filter = 'blur(5px)';offctx.drawImage(img, 0, 300, 100, 100);let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}}

filterDemo

方法

fillRect

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

填充一个矩形。

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

参数：

参数类型必填默认值说明
xnumber是0指定矩形左上角点的x坐标，单位：vp。
ynumber是0指定矩形左上角点的y坐标，单位：vp。
wnumber是0指定矩形的宽度，单位：vp。
hnumber是0指定矩形的高度，单位：vp。

示例：

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

zh-cn_image_0000001194192436

strokeRect

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

绘制具有边框的矩形，矩形内部不填充。

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

参数：

参数类型必填默认值说明
xnumber是0指定矩形的左上角x坐标，单位：vp。
ynumber是0指定矩形的左上角y坐标，单位：vp。
widthnumber是0指定矩形的宽度，单位：vp。
heightnumber是0指定矩形的高度，单位：vp。

示例：

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

zh-cn_image_0000001194352436

clearRect

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

删除指定区域内的绘制内容。

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

参数：

参数类型必填默认值描述
xnumber是0指定矩形上的左上角x坐标，单位：vp。
ynumber是0指定矩形上的左上角y坐标，单位：vp。
widthnumber是0指定矩形的宽度，单位：vp。
heightnumber是0指定矩形的高度，单位：vp。

示例：

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

zh-cn_image_0000001238952377

fillText

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

绘制填充类文本。

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

参数：

参数类型必填默认值说明
textstring是""需要绘制的文本内容。
xnumber是0需要绘制的文本的左下角x坐标，单位：vp。
ynumber是0需要绘制的文本的左下角y坐标，单位：vp。
maxWidthnumber否-指定文本允许的最大宽度，单位：vp。

示例：

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

zh-cn_image_0000001194032458

strokeText

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

绘制描边类文本。

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

参数：

参数类型必填默认值描述
textstring是""需要绘制的文本内容。
xnumber是0需要绘制的文本的左下角x坐标，单位：vp。
ynumber是0需要绘制的文本的左下角y坐标，单位：vp。
maxWidthnumber否-需要绘制的文本的最大宽度，单位：vp。

示例：

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

zh-cn_image_0000001238952401

measureText

measureText(text: string): TextMetrics

该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。

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

参数：

参数类型必填默认值说明
textstring是""需要进行测量的文本。

返回值：

类型说明
TextMetrics文本的尺寸信息。
从API version 9开始，该接口支持在ArkTS卡片中使用。

示例：

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

zh-cn_image_0000001194032480

stroke

stroke(path?: Path2D): void

进行边框绘制操作。

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

参数：

参数类型必填默认值描述
pathPath2D否null需要绘制的Path2D。

示例：

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

zh-cn_image_0000001238832389

beginPath

beginPath(): void

创建一个新的绘制路径。

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

示例：

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

zh-cn_image_0000001193872522

moveTo

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

路径从当前点移动到指定点。

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

参数：

参数类型必填默认值说明
xnumber是0指定位置的x坐标，单位：vp。
ynumber是0指定位置的y坐标，单位：vp。

示例：

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

zh-cn_image_0000001238832409

lineTo

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

从当前点到指定点进行路径连接。

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

参数：

参数类型必填默认值描述
xnumber是0指定位置的x坐标，单位：vp。
ynumber是0指定位置的y坐标，单位：vp。

示例：

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

zh-cn_image_0000001238712443

closePath

closePath(): void

结束当前路径形成一个封闭路径。

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

示例：

// xxx.ets
@Entry
@Component
struct ClosePath {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.beginPath()offContext.moveTo(30, 30)offContext.lineTo(110, 30)offContext.lineTo(70, 90)offContext.closePath()offContext.stroke()let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001194192460

createPattern

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

通过指定图像和重复方式创建图片填充的模板。

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

参数：

参数类型必填默认值描述
imageImageBitmap是null图源对象，具体参考ImageBitmap对象。
repetitionstring | null是“”设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'、'clamp'、'mirror'。

返回值：

类型说明
CanvasPattern | null通过指定图像和重复方式创建图片填充的模板对象。

示例：

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

zh-cn_image_0000001194352456

bezierCurveTo

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

创建三次贝赛尔曲线的路径。

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

参数：

参数类型必填默认值描述
cp1xnumber是0第一个贝塞尔参数的x坐标值，单位：vp。
cp1ynumber是0第一个贝塞尔参数的y坐标值，单位：vp。
cp2xnumber是0第二个贝塞尔参数的x坐标值，单位：vp。
cp2ynumber是0第二个贝塞尔参数的y坐标值，单位：vp。
xnumber是0路径结束时的x坐标值，单位：vp。
ynumber是0路径结束时的y坐标值，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct BezierCurveTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.beginPath()offContext.moveTo(10, 10)offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)offContext.stroke()let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238952403

quadraticCurveTo

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

创建二次贝赛尔曲线的路径。

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

参数：

参数类型必填默认值描述
cpxnumber是0贝塞尔参数的x坐标值，单位：vp。
cpynumber是0贝塞尔参数的y坐标值，单位：vp。
xnumber是0路径结束时的x坐标值，单位：vp。
ynumber是0路径结束时的y坐标值，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.beginPath()offContext.moveTo(20, 20)offContext.quadraticCurveTo(100, 100, 200, 20)offContext.stroke()let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001194032482

arc

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

绘制弧线路径。

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

参数：

参数类型必填默认值描述
xnumber是0弧线圆心的x坐标值，单位：vp。
ynumber是0弧线圆心的y坐标值，单位：vp。
radiusnumber是0弧线的圆半径，单位：vp。
startAnglenumber是0弧线的起始弧度。
endAnglenumber是0弧线的终止弧度。
counterclockwiseboolean否false是否逆时针绘制圆弧。

示例：

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

zh-cn_image_0000001239032429

arcTo

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

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

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

参数：

参数类型必填默认值描述
x1number是0圆弧经过的第一个点的x坐标值，单位：vp。
y1number是0圆弧经过的第一个点的y坐标值，单位：vp。
x2number是0圆弧经过的第二个点的x坐标值，单位：vp。
y2number是0圆弧经过的第二个点的y坐标值，单位：vp。
radiusnumber是0圆弧的圆半径值，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct ArcTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.moveTo(100, 20)offContext.arcTo(150, 20, 150, 70, 50)offContext.stroke()let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001193872524

ellipse

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

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

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

参数：

参数类型必填默认值说明
xnumber是0椭圆圆心的x轴坐标，单位：vp。
ynumber是0椭圆圆心的y轴坐标，单位：vp。
radiusXnumber是0椭圆x轴的半径长度，单位：vp。
radiusYnumber是0椭圆y轴的半径长度，单位：vp。
rotationnumber是0椭圆的旋转角度，单位为弧度。
startAnglenumber是0椭圆绘制的起始点角度，以弧度表示。
endAnglenumber是0椭圆绘制的结束点角度，以弧度表示。
counterclockwiseboolean否false是否以逆时针方向绘制椭圆。
true:逆时针方向绘制椭圆。
false:顺时针方向绘制椭圆。

示例：

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

zh-cn_image_0000001194192440

rect

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

创建矩形路径。

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

参数：

参数类型必填默认值描述
xnumber是0指定矩形的左上角x坐标值，单位：vp。
ynumber是0指定矩形的左上角y坐标值，单位：vp。
wnumber是0指定矩形的宽度，单位：vp。
hnumber是0指定矩形的高度，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)offContext.stroke()let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238712445

fill

fill(fillRule?: CanvasFillRule): void

对封闭路径进行填充。

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

参数:

参数类型必填默认值描述
fillRuleCanvasFillRule否"nonzero"指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。
// xxx.ets
@Entry
@Component
struct Fill {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.fillStyle = '#000000'offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)offContext.fill()let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001194192462

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

对封闭路径进行填充。

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

参数:

参数类型必填默认值描述
pathPath2D是Path2D填充路径。
fillRuleCanvasFillRule否"nonzero"指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。

示例:

// xxx.ets
@Entry
@Component
struct Fill {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)let region = new Path2D()region.moveTo(30, 90)region.lineTo(110, 20)region.lineTo(240, 130)region.lineTo(60, 130)region.lineTo(190, 20)region.lineTo(270, 90)region.closePath()// Fill pathoffContext.fillStyle = '#00ff00'offContext.fill(region, "evenodd")let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_000000127777775

clip

clip(fillRule?: CanvasFillRule): void

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

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

参数:

参数类型必填默认值描述
fillRuleCanvasFillRule否"nonzero"指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。

示例：

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

zh-cn_image_0000001194032462

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

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

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

参数:

参数类型必填默认值描述
pathPath2D是Path2D剪切路径。
fillRuleCanvasFillRule否"nonzero"指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。

示例：

// xxx.ets
@Entry
@Component
struct Clip {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)let region = new Path2D()region.moveTo(30, 90)region.lineTo(110, 20)region.lineTo(240, 130)region.lineTo(60, 130)region.lineTo(190, 20)region.lineTo(270, 90)region.closePath()offContext.clip(region,"evenodd")offContext.fillStyle = "rgb(0,255,0)"offContext.fillRect(0, 0, 600, 600)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_000000127777779

resetTransform

resetTransform(): void

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

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

rotate

rotate(angle: number): void

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

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

参数：

参数类型必填默认值描述
anglenumber是0设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

示例：

// xxx.ets
@Entry
@Component
struct Rotate {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.rotate(45 * Math.PI / 180)offContext.fillRect(70, 20, 50, 50)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238952405

scale

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

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

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

参数：

参数类型必填默认值描述
xnumber是0设置水平方向的缩放值。
ynumber是0设置垂直方向的缩放值。

示例：

// xxx.ets
@Entry
@Component
struct Scale {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.lineWidth = 3offContext.strokeRect(30, 30, 50, 50)offContext.scale(2, 2) // Scale to 200%offContext.strokeRect(30, 30, 50, 50)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001193872498

transform

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

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

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

说明： 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标)：

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

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

参数：

参数类型必填默认值描述
anumber是0scaleX: 指定水平缩放值。
bnumber是0skewX: 指定垂直倾斜值。
cnumber是0skewY: 指定水平倾斜值。
dnumber是0scaleY: 指定垂直缩放值。
enumber是0translateX: 指定水平移动值，单位：vp。
fnumber是0translateY: 指定垂直移动值，单位：vp。

示例：

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

zh-cn_image_0000001239032431

setTransform

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

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

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

参数：

参数类型必填默认值描述
anumber是0scaleX: 指定水平缩放值。
bnumber是0skewX: 指定垂直倾斜值。
cnumber是0skewY: 指定水平倾斜值。
dnumber是0scaleY: 指定垂直缩放值。
enumber是0translateX: 指定水平移动值，单位：vp。
fnumber是0translateY: 指定垂直移动值，单位：vp。

示例：

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

zh-cn_image_0000001193872526

setTransform

setTransform(transform?: Matrix2D): void

以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。

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

参数：

参数类型必填默认值描述
transformMatrix2D否null变换矩阵。

示例：

// xxx.ets@Entry@Componentstruct TransFormDemo {private settings: RenderingContextSettings = new RenderingContextSettings(true);private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings);private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings);build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('context1');Canvas(this.context1).width('230vp').height('160vp').backgroundColor('#ffff00').onReady(() =>{this.offcontext1.fillRect(100, 20, 50, 50);this.offcontext1.setTransform(1, 0.5, -0.5, 1, 10, 10);this.offcontext1.fillRect(100, 20, 50, 50);let image = this.offcontext1.transferToImageBitmap();this.context1.transferFromImageBitmap(image);})Text('context2');Canvas(this.context2).width('230vp').height('160vp').backgroundColor('#0ffff0').onReady(() =>{this.offcontext2.fillRect(100, 20, 50, 50);let storedTransform = this.offcontext1.getTransform();this.offcontext2.setTransform(storedTransform);this.offcontext2.fillRect(100, 20, 50, 50);let image = this.offcontext2.transferToImageBitmap();this.context2.transferFromImageBitmap(image);})}.width('100%').height('100%')}}

zh-cn_image_0000001193872527.jpeg

getTransform

getTransform(): Matrix2D

获取当前被应用到上下文的转换矩阵。

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

返回值：

类型说明
Matrix2D矩阵对象。

示例：

// xxx.ets
@Entry
@Component
struct TransFormDemo {private settings: RenderingContextSettings = new RenderingContextSettings(true);private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings);private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings);build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('context1');Canvas(this.context1).width('230vp').height('120vp').backgroundColor('#ffff00').onReady(() =>{this.offcontext1.fillRect(50, 50, 50, 50);this.offcontext1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25);this.offcontext1.fillRect(50, 50, 50, 50);let image = this.offcontext1.transferToImageBitmap();this.context1.transferFromImageBitmap(image);})Text('context2');Canvas(this.context2).width('230vp').height('120vp').backgroundColor('#0ffff0').onReady(() =>{this.offcontext2.fillRect(50, 50, 50, 50);let storedTransform = this.offcontext1.getTransform();console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY +", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY +", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]")this.offcontext2.setTransform(storedTransform);this.offcontext2.fillRect(50,50,50,50);let image = this.offcontext2.transferToImageBitmap();this.context2.transferFromImageBitmap(image);})}.width('100%').height('100%')}
}

zh-cn_image_0000001219982726.png

translate

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

移动当前坐标系的原点。

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

参数：

参数类型必填默认值描述
xnumber是0设置水平平移量，单位：vp。
ynumber是0设置竖直平移量，单位：vp。

示例：

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

zh-cn_image_0000001238832413

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卡片中使用，卡片中不支持PixelMap对象。

参数：

参数类型必填默认值描述
imageImageBitmap 或PixelMap是null图片资源，请参考ImageBitmap或PixelMap。
sxnumber否0裁切源图像时距离源图像左上角的x坐标值，单位：vp。
synumber否0裁切源图像时距离源图像左上角的y坐标值，单位：vp。
swnumber否0裁切源图像时需要裁切的宽度，单位：vp。
shnumber否0裁切源图像时需要裁切的高度，单位：vp。
dxnumber是0绘制区域左上角在x轴的位置，单位：vp。
dynumber是0绘制区域左上角在y 轴的位置，单位：vp。
dwnumber否0绘制区域的宽度，单位：vp。
dhnumber否0绘制区域的高度，单位：vp。

示例：

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

zh-cn_image_0000001238712447

createImageData

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

根据当前ImageData对象重新创建一个宽、高相同的ImageData对象，请参考ImageData。createImageData示例同putImageData。

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

参数：

参数类型必填默认描述
swnumber是0ImageData的宽度，单位：vp。
shnumber是0ImageData的高度，单位：vp。

createImageData(imageData: ImageData): ImageData

根据已创建的ImageData对象创建新的ImageData对象，请参考ImageData。createImageData示例同putImageData。

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

参数：

参数类型必填默认描述
imagedataImageData是null被复制的ImageData对象。

返回值：

类型说明
ImageData新的ImageData对象

getPixelMap

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

以当前canvas指定区域内的像素创建PixelMap对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。

参数：

参数类型必填默认值描述
sxnumber是0需要输出的区域的左上角x坐标，单位：vp。
synumber是0需要输出的区域的左上角y坐标，单位：vp。
swnumber是0需要输出的区域的宽度，单位：vp。
shnumber是0需要输出的区域的高度，单位：vp。

返回值：

类型说明
PixelMap新的PixelMap对象

示例：

// xxx.ets
@Entry
@Component
struct GetPixelMap {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)private img:ImageBitmap = new ImageBitmap("/images/star.png")build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.drawImage(this.img, 100, 100, 130, 130)let pixelmap = offContext.getPixelMap(150, 150, 130, 130)offContext.setPixelMap(pixelmap)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_000000127777783

setPixelMap

setPixelMap(value?: PixelMap): void

将当前传入PixelMap对象绘制在画布上。setPixelMap示例同getPixelMap。

参数：

参数类型必填默认值描述
valuePixelMap否null包含像素值的PixelMap对象

getImageData

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

以当前canvas指定区域内的像素创建ImageData对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。

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

参数：

参数类型必填默认值描述
sxnumber是0需要输出的区域的左上角x坐标，单位：vp。
synumber是0需要输出的区域的左上角y坐标，单位：vp。
swnumber是0需要输出的区域的宽度，单位：vp。
shnumber是0需要输出的区域的高度，单位：vp。

返回值：

类型说明
ImageData新的ImageData对象

示例：

// xxx.ets
@Entry
@Component
struct GetImageData {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)offContext.drawImage(this.img,0,0,130,130)let imagedata = offContext.getImageData(50,50,130,130)offContext.putImageData(imagedata,150,150)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_000000127777780

putImageData

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

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

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

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

参数：

参数类型必填默认值描述
imagedataObject是null包含像素值的ImageData对象。
dxnumber | string10+是0填充区域在x轴方向的偏移量，单位：vp。
dynumber | string10+是0填充区域在y轴方向的偏移量，单位：vp。
dirtyXnumber | string10+否0源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量，单位：vp。
dirtyYnumber | string10+否0源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量，单位：vp。
dirtyWidthnumber | string10+否imagedata的宽度源图像数据矩形裁切范围的宽度，单位：vp。
dirtyHeightnumber | string10+否imagedata的高度源图像数据矩形裁切范围的高度，单位：vp。

示例：

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

zh-cn_image_0000001194192464

setLineDash

setLineDash(segments: number[]): void

设置画布的虚线样式。

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

参数：

参数类型描述
segmentsnumber[]描述线段如何交替和线段间距长度的数组，单位：vp。

示例：

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

zh-cn_image_000000127777772

getLineDash

getLineDash(): number[]

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

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

返回值：

类型说明
number[]返回数组，该数组用来描述线段如何交替和间距长度，单位：vp。

示例：

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

zh-cn_image_000000127777778

toDataURL

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

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

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

参数：

参数名参数类型必填描述
typestring否可选参数，用于指定图像格式，默认格式为image/png。
qualitynumber否在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

返回值：

类型说明
string图像的URL地址。

示例：

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

transferToImageBitmap

transferToImageBitmap(): ImageBitmap

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

返回值：

类型说明
ImageBitmap存储离屏画布上渲染的像素数据。

示例：

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

zh-cn_image_0000001238952387

restore

restore(): void

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

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

示例：

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

zh-cn_image_000000127777781

save

save(): void

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

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

示例：

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

zh-cn_image_000000127777781

createLinearGradient

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

创建一个线性渐变色。

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

参数：

参数类型必填默认值描述
x0number是0起点的x轴坐标，单位：vp。
y0number是0起点的y轴坐标，单位：vp。
x1number是0终点的x轴坐标，单位：vp。
y1number是0终点的y轴坐标，单位：vp。

返回值：

类型说明
CanvasGradient新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。

示例：

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

zh-cn_image_0000001194032516

createRadialGradient

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

创建一个径向渐变色。

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

参数：

参数类型必填默认值描述
x0number是0起始圆的x轴坐标，单位：vp。
y0number是0起始圆的y轴坐标，单位：vp。
r0number是0起始圆的半径。必须是非负且有限的，单位：vp。
x1number是0终点圆的x轴坐标，单位：vp。
y1number是0终点圆的y轴坐标，单位：vp。
r1number是0终点圆的半径。必须为非负且有限的，单位：vp。

返回值：

类型说明
CanvasGradient新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。

示例：

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

zh-cn_image_0000001238952407

createConicGradient10+

createConicGradient(startAngle: number, x: number, y: number): CanvasGradient

创建一个圆锥渐变色。

参数：

参数类型必填默认值描述
startAnglenumber是0开始渐变的角度，以弧度为单位。角度测量从中心右侧水平开始，顺时针移动。
xnumber是0圆锥渐变的中心x轴坐标，单位：vp。
ynumber是0圆锥渐变的中心y轴坐标，单位：vp。
类型说明
CanvasGradient返回一个渐变对象。

返回值：

类型说明
CanvasGradient新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。

示例：

// xxx.ets
@Entry
@Component
struct OffscreenCanvasConicGradientPage {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffffff').onReady(() =>{let offContext = this.offCanvas.getContext("2d", this.settings)let grad = offContext.createConicGradient(0, 50, 80)grad.addColorStop(0.0, '#ff0000')grad.addColorStop(0.5, '#ffffff')grad.addColorStop(1.0, '#00ff00')offContext.fillStyle = gradoffContext.fillRect(0, 30, 100, 100)let image = this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width('100%').height('100%')}
}

zh-cn_image_0000001239032419

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

相关文章：

鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：OffscreenCanvasRenderingContext2D）

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

编程日记 2024/3/19 23:39:51

Redis如何实现主从复制？主从复制的作用是什么？Redis集群是如何工作的？它有哪些优点和缺点？

Redis如何实现主从复制&#xff1f;主从复制的作用是什么&#xff1f; Redis的主从复制是一种数据复制机制&#xff0c;其中一个Redis实例作为主节点&#xff08;master&#xff09;&#xff0c;而其他Redis实例作为从节点&#xff08;slave&#xff09;。主从复制的实现过程如…...

编程日记 2024/3/19 23:38:50

【Numpy】（2）numpy对象和random模块

numpy.array对象 numpy.array 对象是 NumPy 库的核心&#xff0c;它提供了一种高效的方式来存储和操作同质数据类型的多维数组。每个 numpy.array 对象都有一系列的属性&#xff0c;这些属性提供了关于数组的重要信息。理解这些属性对于有效地使用 NumPy 和进行数据分析是非常…...

编程日记 2024/3/19 23:35:46

[QJS xmake] 非常简单地在Windows下编译QuickJS！

文章目录 前言准备C编译器xmake编译包 工程准备修改版本号第一遍编译第二遍编译效果 前言 quickjs是个很厉害的东西啊&#xff0c;我一直想编译一下的&#xff0c;奈何一直没成功。现在找了点时间成功编译了&#xff0c;写篇文章记录一下。当前版本&#xff1a;2024-1-13 应该…...

编程日记 2024/3/19 23:33:44

Ubuntu双系统/home分区扩容

一、Windows系统中利用磁盘管理分出空闲区域&#xff0c;如果多就多分一些 二、插入安装Ubuntu的U盘启动盘&#xff0c;lenovo电脑F12&#xff08;其他电脑可选择其他类似方式&#xff09;选择U盘启动项&#xff0c;然后选择ubuntu&#xff0c;出现安装界面&#xff0c;再选择t…...

编程日记 2024/3/19 23:29:41

0基础学习VR全景平台篇第145篇：图层控件功能

大家好&#xff0c;欢迎观看蛙色VR官方——后台使用系列课程&#xff01;这期&#xff0c;我们将为大家介绍如何使用图层控件功能。 一.如何使用图层控件功能&#xff1f; 进入作品编辑页面&#xff0c;点击左边的控件后就可以在右边进行相应设置。 二.图层控件有哪些功能&am…...

编程日记 2024/3/19 23:28:39

一文看懂套利的那些事儿

我们经常在投资中都有提到套利策略&#xff0c;经常听到某某套利&#xff0c;或者借用什么套利工具&#xff0c;股票可以套利&#xff0c;基金期货期权也可以套利&#xff0c;套利到底是什么&#xff1f;套利到底是如何运用的&#xff1f; 今天我们一文解读套利市场&#xff01…...

编程日记 2024/3/19 23:25:36

【工具】Mermaid + 大模型画流程图

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 引入使用画TCP三次握手了解历史人物 总结 引入 最近看面试文章关于TCP三次握手和…...

编程日记 2024/3/19 23:24:35

内网渗透学习-环境搭建

1、环境搭建测试 虚拟机网络环境配置&#xff0c;模拟外网和内网 主机操作系统网络内网ip外网ip物理主机window10vmnet8192.168.70.1攻击机kali Linuxvmnet8192.168.70.134域控主机win server 2008 r2vmnet0192.168.52.138域成员主机win server 2k3vmnet0192.168.52.141服务器…...

编程日记 2024/3/19 23:19:30

el-progress渐变色

线性渐变喝环形渐变 线性渐变&#xff1a;直接修改样式根据所需颜色修改即可 ::v-deep .el-progress {.el-progress-bar {.el-progress-bar__outer {background: linear-gradient(to right#8075fd, #b87bfe)}.el-progress-bar__inner {background: linear-gradient(to right…...

编程日记 2024/3/19 23:18:29

DHCP在企业网的部署及安全防范

学习目标&#xff1a; 1. DHCP能够解决什么问题&#xff1f; 2. DHCP服务器如何部署&#xff1f; 3. 私接设备会带来什么问题以及如何防范&#xff1f; 给DHCP服务器配置地址&#xff1a; 地址池&#xff1a; DHCP有2种分配模式&#xff1a;全局分配和接口分配 DHCP enable...

编程日记 2024/3/19 23:16:25

列表的常用操作

列表的常用操作&#xff08;方法&#xff09; 列表除了可以&#xff1a; 定义使用下标索引获取值 此外列表也提供一些列功能&#xff1a;插入元素删除元素清空元素修改元素统计元素个数 等等功能&#xff0c;这些功能我们都称之为&#xff1a;列表的方法 列表的查询功能&…...

编程日记 2024/3/19 23:12:22

外包2月，技术退步惊现！大专生逆袭大厂，全靠这份神秘资料！

大家好&#xff0c;我是一名大专生&#xff0c;19年通过校招进入湖南某软件公司&#xff0c;从事功能测试工作已近4年。今年8月&#xff0c;我意识到长期舒适的环境让我变得不思进取&#xff0c;技术停滞不前&#xff0c;甚至因此失去了谈了2年的女朋友。我下定决心&#xff0c…...

编程日记 2024/3/19 23:11:20

考研失败, 学点Java打小工_Day3_卫语句_循环

1 编码规范——卫语句 表达异常分支时&#xff0c;少用if-else方式。   比如成绩判断中对于非法输入的处理&#xff1a; /*>90 <100 优秀>80 <90 良好>70 <80 一般>60 <70 及格<60 不及格*/Testpu…...

编程日记 2024/3/19 23:10:19

网络架构层_服务器上下行宽带

网络架构层_服务器上下行宽带 解释一 云服务器ECS网络带宽的概念、计费、安全及使用限制_云服务器 ECS(ECS)-阿里云帮助中心 网络带宽是指在单位时间&#xff08;一般指的是1秒钟&#xff09;内能传输的数据量&#xff0c;带宽数值越大表示传输能力越强&#xff0c;即在单位…...

编程日记 2024/3/19 23:06:16

面试算法-47-有效的括号

题目 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个右…...

编程日记 2024/3/19 23:05:15

Android11 HID开发系统源码配置

# RK356X_ANDROID11_CUSTOM_HID ## 1.确认SDK版本。 cat .repo/manifests/include/rk356x_repository.xml <?xml version="1.0" encoding="UTF-8"?> <manifest> <project path="device/rockchip/rk356x" name="rk/dev…...

编程日记 2024/3/19 23:04:14

73_Pandas获取分位数/百分位数

73_Pandas获取分位数/百分位数 使用 quantile() 方法获取 pandas 中 DataFrame 或 Series 的分位数/百分位数。 目录 Quantile() 的基本用法指定要获取的分位数/百分位数&#xff1a;参数 q指定interpolation方法&#xff1a;参数interpolation 数据类型 dtype 的差异 指定行…...

编程日记 2024/3/19 22:59:10

力扣练习题

1. 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按…...

编程日记 2024/3/19 22:57:07

Telegraf--采集指定信息

Telegraf 采集字段解释 根据需求选取需要采集的字段，直接配置在fieldpass中，这样的好处是节约流量，更加简洁明了。下面加粗的部分是telegraf.conf中配置的指标，其他指标根据需求添加即可。 2024年3月18日10:55:41 更新说明： 添加自定义温度指标采集 CPU信息 usage_iowait:…...

编程日记 2024/3/19 22:53:02

Redis是如何实现持久化的？请解释RDB和AOF持久化方式的区别和优缺点。Redis是单线程还是多线程的？为什么Redis使用单线程模型仍然能保持高性能？

Redis是如何实现持久化的&#xff1f;请解释RDB和AOF持久化方式的区别和优缺点。 Redis实现持久化主要有两种方式&#xff1a;RDB&#xff08;Redis DataBase&#xff09;和AOF&#xff08;Append Only File&#xff09;。这两种方式的主要区别在于它们的持久化机制和适用场景。…...

编程日记 2024/3/19 22:52:01

java通过Excel批量上传数据

一、首先在前端写一个上传功能。 <template><!-- 文件上传 --><el-upload class"upload-demo" :on-change"onChange" :auto-upload"false"><el-button type"primary">上传Excel</el-button></el-up…...

编程日记 2024/3/19 22:51:00

VS2022 配置QT5.9.9

QT安装 下载地址&#xff1a;https://download.qt.io/archive/qt/ 下载安装后进行配置 无法运行 rc.exe 下载VS2022 官网下载 配置 1.扩展-管理扩展-下载Qt Visual Studio Tools 安装 2.安装完成后&#xff0c;打开vs2022,点击扩展&#xff0c;会发现多出了QT VS Tools,点…...

编程日记 2024/3/19 22:49:58

接收用户输入的数字，判断是否是质数(素数)以及输出1-100之间的所有质数

问题描述&#xff1a;接收用户输入的数字&#xff0c;判断是否是质数(素数)以及输出1-100之间的所有质数 质数的概念&#xff1a;一个大于1的自然数&#xff0c;除了1和它本身外&#xff0c;不能被其他自然数整除的数叫做质数&#xff0c;也称为素数 规定&#xff1a;1既不是…...

编程日记 2024/3/19 22:48:57

人脸识别AI视觉算法---豌豆云

人脸识别AI算法是一种基于计算机视觉和深度学习技术的系统&#xff0c;用于自动识别和验证人脸。 这些算法在多种领域有着广泛的应用&#xff0c;包括安全认证、身份验证、监控、社交媒体、医疗保健和零售等。 以下是有关人脸识别AI算法的技术背景和应用场景的介绍&#xff1…...

编程日记 2024/3/19 22:47:56

Apache SeaTunnel MongoDB CDC 使用指南

随着数据驱动决策的重要性日益凸显&#xff0c;实时数据处理成为企业竞争力的关键。SeaTunnel MongoDB CDC(Change Data Capture) 源连接器的推出&#xff0c;为开发者提供了一个高效、灵活的工具&#xff0c;以实现对 MongoDB 数据库变更的实时捕获和处理。 本文将深入探讨该连…...

编程日记 2024/3/19 22:46:54

智能合约 之 部署ERC-20

Remix介绍 Remix是一个由以太坊社区开发的在线集成开发环境&#xff08;IDE&#xff09;&#xff0c;旨在帮助开发者编写、测试和部署以太坊智能合约。它提供了一个简单易用的界面&#xff0c;使得开发者可以在浏览器中直接进行智能合约的开发&#xff0c;而无需安装任何额外的…...

编程日记 2024/3/19 22:44:52

【C++】用红黑树模拟实现set、map

目录 前言及准备&#xff1a;一、红黑树接口1.1 begin1.2 end1.3 查找1.4 插入1.5 左单旋和右单旋 二、树形迭代器&#xff08;正向&#xff09;2.1 前置 三、模拟实现set四、模拟实现map 前言及准备&#xff1a; set、map的底层结构是红黑树&#xff0c;它们的函数通过调用红…...

编程日记 2024/3/19 22:43:51

实现：mysql-5.7.42 到 mysql-8.2.0 的升级（二进制方式）

实现&#xff1a;mysql-5.7.42 到 mysql-8.2.0 的升级&#xff08;二进制方式&#xff09; 1、操作环境1、查看当前数据库版本2、操作系统版本3、查看 Linux 系统上的 glibc&#xff08;GNU C 库&#xff09;版本&#xff08;**这里很重要&#xff0c;要下载对应的内核mysql版本…...

编程日记 2024/3/19 22:42:50

深入探讨医保购药APP的技术架构与设计思路

随着移动互联网的发展&#xff0c;医疗保健行业也迎来了数字化转型的浪潮。医保购药APP作为医保体系数字化的一部分&#xff0c;其技术架构和设计思路至关重要。接下来&#xff0c;小编将为您讲解医保购药APP的技术架构与设计思路&#xff0c;为相关从业者提供参考和启发。 一、…...

编程日记 2024/3/19 22:41:49

深圳网上招聘最好的网站/搜索引擎广告优化

关于几个目录&#xff0c;GTK、Shell的目录是&#xff1a;/usr/share/themes&#xff0c;图标的目录是/usr/share/icons。 放到/usr/share/下是全局修改&#xff0c;也就是说如果你换一个账户登陆&#xff0c;也是可以用这些主题文件的。弊端就是操作较复杂&#xff0c;需要sud…...

编程日记 2025/1/31 14:36:34

北京网站建设备案代理/google关键词指数

mktime () 取得一个日期的 Unix 时间戳int mktime ([ int $hour date(“H”) [, int $minute date(“i”) [, int $second date(“s”) [, int $month date(“n”) [, int $day date(“j”) [, int $year date(“Y”) [, int $is_dst -1 ]]]]]]] )说明&#xff1a;根据给…...

编程日记 2025/1/31 13:32:44

怎么用office做网站/seo常用工具有哪些

1、下载 Maven ①、官网下载地址&#xff1a;http://maven.apache.org/download.cgi 2、配置 Maven 环境变量 3.3.9 是一个稳定的maven版本&#xff0c;老程序员最喜欢 CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar JAVA_HOME C:\Program Files\jdk1.8.0_16…...

编程日记 2025/1/31 8:21:17

寿光做网站/推广咨询服务公司

1970年&#xff0c;修女玛丽尤肯达给美国航空航天局马绍尔太空航行中心的科学副总监恩斯特史图林格博士写了一封信&#xff0c;在信中她问道&#xff1a;目前地球上还有很多孩子吃不上饭&#xff0c;你们怎么舍得为远在火星的项目花费数十亿美元&#xff1f;史图林格给尤肯达的…...

编程日记 2025/1/31 7:33:24

宿迁网站建设/百度客服在哪里找

Description 某人读论文&#xff0c;一篇论文是由许多单词组成。但他发现一个单词会在论文中出现很多次&#xff0c;现在想知道每个单词分别在论文中出现多少次。 Input 第一个一个整数N,表示有多少个单词&#xff0c;接下来N行每行一个单词。每个单词由小写字母组成&#x…...

编程日记 2025/1/31 4:10:59

上海网站建设过程/优化培训课程

虚拟机克隆完成之后&#xff0c;子机和母机的MAC地址、IP地址、主机名、密码都是一致的。为了不影响上网&#xff0c;需要更改这几项&#xff1a;操作系统物理地址、IP地址、主机名。4步走战略&#xff1a;1、删除网卡文件中的mac地址&#xff0c;保存退出。[rootcent67 ~]# vi…...

编程日记 2025/1/31 3:13:11