HarmonyOS应用开发-绘制图像实现

说明：

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

使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等

属性：

示例代码：
Hml代码：

Css代码：

.container {    flex-direction: column;    justify-content: center;    align-items: center;    width: 100%;    height: 100%;}

Js代码：

export default {    onShow(){ var ctx = this.$refs.canvasId.getContext('2d'); var offscreen = new OffscreenCanvas(360, 500); var offCanvas2 = offscreen.getContext("2d"); var img = new Image(); img.src = 'common/images/bg-tv.jpg'; offCanvas2.drawImage(img, 0, 0, 100, 100); offCanvas2.filter = 'blur(5px)'; offCanvas2.drawImage(img, 100, 0, 100, 100); offCanvas2.filter = 'grayscale(50%)'; offCanvas2.drawImage(img, 200, 0, 100, 100); offCanvas2.filter = 'hue-rotate(90deg)'; offCanvas2.drawImage(img, 0, 100, 100, 100); offCanvas2.filter = 'invert(100%)'; offCanvas2.drawImage(img, 100, 100, 100, 100); offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; offCanvas2.drawImage(img, 200, 100, 100, 100); offCanvas2.filter = 'brightness(0.4)'; offCanvas2.drawImage(img, 0, 200, 100, 100); offCanvas2.filter = 'opacity(25%)'; offCanvas2.drawImage(img, 100, 200, 100, 100); offCanvas2.filter = 'saturate(30%)'; offCanvas2.drawImage(img, 200, 200, 100, 100); offCanvas2.filter = 'sepia(60%)'; offCanvas2.drawImage(img, 0, 300, 100, 100); offCanvas2.filter = 'contrast(200%)'; offCanvas2.drawImage(img, 100, 300, 100, 100); var bitmap = offscreen.transferToImageBitmap(); ctx.transferFromImageBitmap(bitmap);    }}