diff --git a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md index 2baf6b13768a16508b34351dc8d7e6a91a8e66d1..49275a7e53321c5db7d5c505dcb893641a4823ad 100644 --- a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md +++ b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md @@ -53,8 +53,8 @@ Canvas提供画布组件,用于自定义绘制图形,开发者使用CanvasRe //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数,包括是否开启抗锯齿。true表明开启抗锯齿 private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - //用来创建OffscreenCanvasRenderingContext2D对象,width为离屏画布的宽度,height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。 - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + //用来创建OffscreenCanvas对象,width为离屏画布的宽度,height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。 + private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -63,10 +63,11 @@ Canvas提供画布组件,用于自定义绘制图形,开发者使用CanvasRe .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ + var offContext = this.offCanvas.getContext("2d", this.settings) //可以在这里绘制内容 - this.offContext.strokeRect(50, 50, 200, 150); + offContext.strokeRect(50, 50, 200, 150); //将离屏绘值渲染的图像在普通画布上显示 - let image = this.offContext.transferToImageBitmap(); + let image = this.offCanvas.transferToImageBitmap(); this.context.transferFromImageBitmap(image); }) } @@ -211,7 +212,7 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供 struct GetImageData { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") build() { @@ -221,14 +222,15 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供 .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ + var offContext = this.offCanvas.getContext("2d", this.settings) // 使用drawImage接口将图片画在(0,0)为起点,宽高130的区域 - this.offContext.drawImage(this.img,0,0,130,130); + offContext.drawImage(this.img,0,0,130,130); // 使用getImageData接口,获得canvas组件区域中,(50,50)为起点,宽高130范围内的绘制内容 - let imagedata = this.offContext.getImageData(50,50,130,130); + let imagedata = offContext.getImageData(50,50,130,130); // 使用putImageData接口将得到的ImageData画在起点为(150, 150)的区域中 - this.offContext.putImageData(imagedata,150,150); + offContext.putImageData(imagedata,150,150); // 将离屏绘制的内容画到canvas组件上 - let image = this.offContext.transferToImageBitmap(); + let image = this.offCanvas.transferToImageBitmap(); this.context.transferFromImageBitmap(image); }) } @@ -344,4 +346,4 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供 使用画布绘制自定义图形,有以下相关实例可供参考: -- [Lottie动画](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/Lottie) \ No newline at end of file +- [Lottie动画](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/Lottie)