网站开发报价单 doc,宁波网络营销怎么做,做片头片尾比较好的网站,南阳做网站公司哪家好使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制#xff0c;绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区#xff0c;然后将其转换成图片#xff0c;一次性绘制到canvas上#xff0c;加快了绘制速度。 说明#xff1a; 从…使用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.fontfont-size font-family - font-size(可选)指定字号和行高单位支持px和vp。 - font-family(可选)指定字体系列。 语法ctx.fontfont-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-oversource-atopsource-insource-outdestination-overdestination-atopdestination-indestination-outlightercopyxor。 - 默认值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 #0000ffoffContext.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%)}
} 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%)}
} 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 #0000ffoffContext.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%)}
} 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 roundoffContext.moveTo(30, 50)offContext.lineTo(220, 50)offContext.stroke()let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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 miteroffContext.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%)}
} 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 miteroffContext.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%)}
} 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-serifoffContext.fillText(Hello px, 20, 60)offContext.font 30vp sans-serifoffContext.fillText(Hello vp, 20, 100)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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 #0000ffoffContext.moveTo(140, 10)offContext.lineTo(140, 160)offContext.stroke()offContext.font 18px sans-serifoffContext.textAlign startoffContext.fillText(textAlignstart, 140, 60)offContext.textAlign endoffContext.fillText(textAlignend, 140, 80)offContext.textAlign leftoffContext.fillText(textAlignleft, 140, 100)offContext.textAlign centeroffContext.fillText(textAligncenter,140, 120)offContext.textAlign rightoffContext.fillText(textAlignright,140, 140)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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 #0000ffoffContext.moveTo(0, 120)offContext.lineTo(400, 120)offContext.stroke()offContext.font 20px sans-serifoffContext.textBaseline topoffContext.fillText(Top, 10, 120)offContext.textBaseline bottomoffContext.fillText(Bottom, 55, 120)offContext.textBaseline middleoffContext.fillText(Middle, 125, 120)offContext.textBaseline alphabeticoffContext.fillText(Alphabetic, 195, 120)offContext.textBaseline hangingoffContext.fillText(Hanging, 295, 120)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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%)}
} 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%)}
} 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-overoffContext.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-overoffContext.fillStyle rgb(0,0,255)offContext.fillRect(150, 50, 50, 50)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} imageSmoothingQuality // xxx.etsEntryComponentstruct 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 highoffctx.drawImage(this.img, 0, 0, 400, 200)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}} direction // xxx.etsEntryComponentstruct 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 startoffctx.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%)}} filter // xxx.etsEntryComponentstruct 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%)}} 方法
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%)}
} 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%)}
} 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%)}
} 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-serifoffContext.fillText(Hello World!, 20, 100)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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-serifoffContext.strokeText(Hello World!, 20, 60)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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-serifoffContext.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%)}
} 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%)}
} 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 #0000ffoffContext.moveTo(15, 80)offContext.lineTo(280, 160)offContext.stroke()let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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 #000000offContext.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%)}
} 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 #00ff00offContext.fill(region, evenodd)let image this.offCanvas.transferToImageBitmap()this.context.transferFromImageBitmap(image)})}.width(100%).height(100%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} setTransform
setTransform(transform?: Matrix2D): void
以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。
从API version 9开始该接口支持在ArkTS卡片中使用。
参数
参数类型必填默认值描述transformMatrix2D否null变换矩阵。
示例
// xxx.etsEntryComponentstruct 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%)}} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} 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%)}
} getLineDash
getLineDash(): number[]
获得当前画布的虚线样式。
从API version 9开始该接口支持在ArkTS卡片中使用。
返回值
类型说明number[]返回数组该数组用来描述线段如何交替和间距长度单位vp。
示例
// xxx.ets
Entry
Component
struct OffscreenCanvasGetLineDash {State message: string Hello Worldprivate 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%)}
} 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%)}
} 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 #00ff00offContext.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%)}
} 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 #00ff00offContext.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%)}
} 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%)}
} 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%)}
} 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%)}
} 最后有很多小伙伴不知道学习哪些鸿蒙开发技术不知道需要重点掌握哪些鸿蒙应用开发知识点而且学习时频繁踩坑最终浪费大量时间。所以有一份实用的鸿蒙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学习资料
总结
总的来说华为鸿蒙不再兼容安卓对中年程序员来说是一个挑战也是一个机会。只有积极应对变化不断学习和提升自己他们才能在这个变革的时代中立于不败之地。
