Canvas组件实现二维码中心内嵌图标

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

可以通过​​drawImage​​（图像绘制）、​​putImageData​​（使用​​ImageData​​数据填充新的矩形区域）等接口绘制图片，通过​​createImageData​​（创建新的ImageData 对象）、​​getPixelMap​​（以当前canvas指定区域内的像素创建​​PixelMap​​对象）、​​getImageData​​（以当前canvas指定区域内的像素创建ImageData对象）等接口进行图像像素信息处理。

使用的核心API

​​使用画布绘制自定义图形​​

核心代码解释

返回OffscreenCanvas组件的绘图上下文。

let offContext = this.offCanvas.getContext("2d", this.settings)
1.

配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿，

创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制

private settings: RenderingContextSettings = new RenderingContextSettings(true) 
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
1.
2.

使用drawImage接口将图片画在画布上

offContext.drawImage(this.img,0,0,100,100); 
// 使用drawImage接口将图片画在（0，0）为起点，宽高20的区域 
offContext.drawImage(this.img2,40,40,20,20);
1.
2.
3.

使用getPixelMap接口以当前canvas指定区域内的像素创建PixelMap对象，生成二维码并通过image组件显示

this.ima=offContext.getPixelMap(0,0,100,100); 
Image(this.ima) 
.width(100).height(100)
1.
2.
3.