HarmonyOS應(yīng)用開發(fā)-繪制圖像實現(xiàn)

1、蛟龍騰飛學(xué)習(xí)分享材料 HarmonyOS應(yīng)用開發(fā)-繪制圖像實現(xiàn)說明：從API version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。使用OffscreenCanvasRenderingContext2D在offscreen canvas上進(jìn)行繪制，繪制對象可以是矩形、文本、圖片等屬性：屬性類型描述filterstring設(shè)置圖像的濾鏡。支持的濾鏡效果如下：blur：給圖像設(shè)置高斯模糊brightness：給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗contrast：調(diào)整圖像的對比度drop-shadow：給圖像設(shè)置一個陰影效果grayscale：將圖像轉(zhuǎn)換為灰

2、度圖像hue-rotate：給圖像應(yīng)用色相旋轉(zhuǎn)invert：反轉(zhuǎn)輸入圖像opacity：轉(zhuǎn)化圖像的透明程度saturate：轉(zhuǎn)換圖像飽和度sepia：將圖像轉(zhuǎn)換為深褐色示例代碼：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 =

3、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.dr

4、awImage(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); off

5、Canvas2.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 bi