Canvas提供画布组件,用于自定义绘制图形,开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制,绘制对象可以是基础形状、文本、图片等。
使用画布组件绘制自定义图形
可以由以下三种形式在画布绘制自定义图形:
-
使用CanvasRenderingContext2D对象在Canvas画布上绘制。
@Entry @Component struct CanvasExample1 { //用来配置CanvasRenderingContext2D对象的参数,包括是否开启抗锯齿,true表明开启抗锯齿。 private settings: RenderingContextSettings = new RenderingContextSettings(true) //用来创建CanvasRenderingContext2D对象,通过在canvas中调用CanvasRenderingContext2D对象来绘制。 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { //在canvas中调用CanvasRenderingContext2D对象。 Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() => { //可以在这里绘制内容。 this.context.strokeRect(50, 50, 200, 150); }) } .width('100%') .height('100%') } }
-
离屏绘制是指将需要绘制的内容先绘制在缓存区,再将其转换成图片,一次性绘制到Canvas上,加快了绘制速度。过程为:
- 通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象。
- 通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象。
具体使用参考OffscreenCanvasRenderingContext2D对象。
@Entry @Component struct CanvasExample2 { //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数,包括是否开启抗锯齿。true表明开启抗锯齿 private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(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 }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ let offContext = this.offCanvas.getContext("2d", this.settings) //可以在这里绘制内容 offContext.strokeRect(50, 50, 200, 150); //将离屏绘值渲染的图像在普通画布上显示 let image = this.offCanvas.transferToImageBitmap(); this.context.transferFromImageBitmap(image); }) } .width('100%') .height('100%') } }
说明
在画布组件中,通过CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制时调用的接口相同,另接口参数如无特别说明,单位均为vp。
-
在Canvas上加载Lottie动画时,需要先按照如下方式下载Lottie。
import lottie from '@ohos/lottie'
具体接口请参考Lottie。
初始化画布组件
onReady(event: () => void)是Canvas组件初始化完成时的事件回调,调用该事件后,可获取Canvas组件的确定宽高,进一步使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象调用相关API进行图形绘制。
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() => {
this.context.fillStyle = '#0097D4';
this.context.fillRect(50, 50, 100, 100);
})
画布组件绘制方式
在Canvas组件生命周期接口onReady()调用之后,开发者可以直接使用canvas组件进行绘制。或者可以脱离Canvas组件和onReady()生命周期,单独定义Path2d对象构造理想的路径,并在onReady()调用之后使用Canvas组件进行绘制。
-
通过CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象直接调用相关API进行绘制。
Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ this.context.beginPath(); this.context.moveTo(50, 50); this.context.lineTo(280, 160); this.context.stroke(); })
-
先单独定义path2d对象构造理想的路径,再通过调用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的stroke接口或者fill接口进行绘制,具体使用可以参考Path2D对象。
Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ let region = new Path2D(); region.arc(100, 75, 50, 0, 6.28); this.context.stroke(region); })
画布组件常用方法
OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供了大量的属性和方法,可以用来绘制文本、图形,处理像素等,是Canvas组件的核心。常用接口有fill(对封闭路径进行填充)、clip(设置当前路径为剪切路径)、stroke(进行边框绘制操作)等等,同时提供了fillStyle(指定绘制的填充色)、globalAlpha(设置透明度)与strokeStyle(设置描边的颜色)等属性修改绘制内容的样式。将通过以下几个方面简单介绍画布组件常见使用方法:
-
基础形状绘制。
可以通过arc(绘制弧线路径)、 ellipse(绘制一个椭圆)、rect(创建矩形路径)等接口绘制基础形状。
Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ //绘制矩形 this.context.beginPath(); this.context.rect(100, 50, 100, 100); this.context.stroke(); //绘制圆形 this.context.beginPath(); this.context.arc(150, 250, 50, 0, 6.28); this.context.stroke(); //绘制椭圆 this.context.beginPath(); this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2); this.context.stroke(); })
-
文本绘制。
可以通过fillText(绘制填充类文本)、strokeText(绘制描边类文本)等接口进行文本绘制。
Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ //绘制填充类文本 this.context.font = '50px sans-serif'; this.context.fillText("Hello World!", 50, 100); //绘制描边类文本 this.context.font = '55px sans-serif'; this.context.strokeText("Hello World!", 50, 150); })
-
绘制图片和图像像素信息处理。
可以通过drawImage(图像绘制)、putImageData(使用ImageData数据填充新的矩形区域)等接口绘制图片,通过createImageData(创建新的ImageData 对象)、getPixelMap(以当前canvas指定区域内的像素创建PixelMap对象)、getImageData(以当前canvas指定区域内的像素创建ImageData对象)等接口进行图像像素信息处理。
@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('#F5DC62') .onReady(() =>{ let offContext = this.offCanvas.getContext("2d", this.settings) // 使用drawImage接口将图片画在(0,0)为起点,宽高130的区域 offContext.drawImage(this.img,0,0,130,130); // 使用getImageData接口,获得canvas组件区域中,(50,50)为起点,宽高130范围内的绘制内容 let imagedata = offContext.getImageData(50,50,130,130); // 使用putImageData接口将得到的ImageData画在起点为(150, 150)的区域中 offContext.putImageData(imagedata,150,150); // 将离屏绘制的内容画到canvas组件上 let image = this.offCanvas.transferToImageBitmap(); this.context.transferFromImageBitmap(image); }) } .width('100%') .height('100%') } }
-
其他方法。
Canvas中还提供其他类型的方法。渐变(CanvasGradient对象)相关的方法:createLinearGradient(创建一个线性渐变色)、createRadialGradient(创建一个径向渐变色)等。
Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ //创建一个径向渐变色的CanvasGradient对象 let grad = this.context.createRadialGradient(200,200,50, 200,200,200) //为CanvasGradient对象设置渐变断点值,包括偏移和颜色 grad.addColorStop(0.0, '#E87361'); grad.addColorStop(0.5, '#FFFFF0'); grad.addColorStop(1.0, '#BDDB69'); //用CanvasGradient对象填充矩形 this.context.fillStyle = grad; this.context.fillRect(0, 0, 400, 400); })
场景示例
-
规则基础形状绘制。
@Entry @Component struct ClearRect { private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ // 设定填充样式,填充颜色设为蓝色 this.context.fillStyle = '#0097D4'; // 以(50, 50)为左上顶点,画一个宽高200的矩形 this.context.fillRect(50,50,200,200); // 以(70, 70)为左上顶点,清除宽150高100的区域 this.context.clearRect(70,70,150,100); }) } .width('100%') .height('100%') } }
-
不规则图形绘制。
@Entry @Component struct Path2d { private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Row() { Column() { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#F5DC62') .onReady(() =>{ // 使用Path2D的接口构造一个五边形 let path = new Path2D(); path.moveTo(150, 50); path.lineTo(50, 150); path.lineTo(100, 250); path.lineTo(200, 250); path.lineTo(250, 150); path.closePath(); // 设定填充色为蓝色 this.context.fillStyle = '#0097D4'; // 使用填充的方式,将Path2D描述的五边形绘制在canvas组件内部 this.context.fill(path); }) } .width('100%') } .height('100%') } }
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。
点击领取→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助
鸿蒙(HarmonyOS NEXT)最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料
2.视频学习资料+学习PDF文档
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、(南向驱动、嵌入式等)鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。
HarmonyOS Next 最新全套视频教程
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
《鸿蒙开发进阶》
《鸿蒙进阶实战》
大厂面试必问面试题
鸿蒙南向开发技术
鸿蒙APP开发必备
请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说,华为鸿蒙不再兼容安卓,对程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。