IT之家2月10日消息，华为技术有限公司的江英杰为大家揭晓了关于开源鸿蒙OpnHarmony3.1Bta版中的一个关键特性，也就是ArkUI开发框架中的canvas画布。
据介绍，canvas是ArkUI开发框架里的画布组件，常用于自定义绘制图形。因为其轻量、灵活、高效等优点，被广泛应用于UI界面开发中。本期，我们将为大家介绍ArkUI开发框架中canvas组件的使用。
canvas介绍
1.1什么是canvas？
IT之家了解到，在Wb浏览器中，canvas是一个可自定义width、hight的矩形画布，画布左上角为坐标原点，以像素为单位，水平向右为x轴，垂直向下为y轴，画布内所有元素都基于原点进行定位。
如下图所示，我们可以通过canvas标签，创建了一个width=px，hight=px的空白画布，我们还需要“画笔”才能绘制图形。canvas采用轻量的逐像素渲染机制，以JS为“画笔”直接控制画布像素，从而实现图形绘制。
1.2Canvas的“画笔”
canvas本身虽不具备绘制能力，但是提供了获取“画笔”的方法。开发者可通过gtContxt(2d)方法获取CanvasRndringContxt2D对象完成2D图像绘制，或通过gtContxt(wbgl)方法获取WbGLRndringContxt对象完成3D图像绘制。
目前，ArkUI开发框架中的WbGL1.0及WbGL2.0标准3D图形绘制能力正在完善中，所以本文将着重介绍2D图像的绘制。如下图所示，是CanvasRndringContxt2D对象提供的部分2D图像绘制方法，丰富的绘制方法让开发者能高效地绘制出矩形、文本、图片等。
除此之外，开发者还可以通过获取OffscnCanvasRndringContxt2D对象进行离屏绘制，绘制方法同上。当绘制的图形比较复杂时，频繁地删除与重绘会消耗很多性能。
这时，开发者可以根据自身的需求灵活选取离屏渲染的方式，首先通过创建OffscnCanvas对象作为一个缓冲区，然后将内容绘制在OffscnCanvas上，最后再将OffscnCanvas绘制到主画布上，以提高画布性能，确保绘图的质量。
canvas基础绘制方法
通过上节对canvas组件的基本介绍，相信大家对canvas组件已经有了一定的认识，下面我们将为大家实际演示canvas组件在ArkUI开发框架中的使用方法。ArkUI开发框架参考了Wb浏览器中canvas的设计，并在“类Wb开发范式”及“声明式开发范式”两种开发范式中进行提供，接下来我们将分别介绍这两种开发范式中canvas的绘制方法。
2.1类Wb开发范式中canvas的绘制方法
类Wb开发范式，使用HML标签文件进行布局搭建、CSS文件进行样式描述，并通过JS语言进行逻辑处理。目前，JS语言的canvas绘图功能已经基本上完善，下面我们将通过两个示例，展示基于JS语言的canvas组件基础使用方法。
2.1.1矩形填充
CanvasRndringContxt2D对象提供了fillRct(x,y,width,hight)方法，用于绘制一个填充的矩形。如下图所示，在画布内绘制了一个黑色的填充矩形，x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标，width和hight则设置了矩形的尺寸。
示例代码如下：
//创建一个width=px，hight=px的画布!--xxx.hml--divcanvasf="canvas"styl="width:px;hight:px;"/canvas/div
//xxx.jsxportdfault{onShow(){constl=this.$fs.canvas;//获取2D绘制对象constctx=l.gtContxt(2d);//设置填充为黑色ctx.fillStyl=#;//设置填充矩形的坐标及尺寸ctx.fillRct(,,,);}}
2.1.2缩放与阴影
CanvasRndringContxt2D对象提供了scal(x,y)方法，参数x表示横轴方向上缩放倍数，y表示纵轴方向上缩放的倍数，值得注意的是缩放过程中定位也会被缩放。如下图所示，是将上个示例中的填充矩形通过scal(2,1.5)缩放，并通过shadowBlur方法加上阴影后的效果。
示例代码如下：
//xxx.jsxportdfault{onShow(){constl=this.$fs.canvas;constctx=l.gtContxt(2d);//设置绘制阴影的模糊级别ctx.shadowBlur=80;ctx.shadowColor=rgb(0,0,0);ctx.fillStyl=rgb(0,0,0);//xScalto%,yScalto%ctx.scal(2,1.5);ctx.fillRct(,,,);}}
2.2声明式开发范式中canvas的绘制方法
声明式开发范式，采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力，目前已经提供了canvas组件绘制能力，但功能仍在完善中。下面我们将通过两个示例展示声明式开发范式中canvas组件的基础使用方法。
2.2.1图片叠加
如下图所示，是三张图片叠加的效果，顶层的图片覆盖了底层的图片。通过依次使用drawImag(x,y,width,hight)方法设置图片坐标及尺寸，后面绘制的图片自动覆盖原来的图像，从而达到预期效果。
扩展的TS语言采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面，示例代码如下：
Entry
ComponntstructIndxCanvas1{privatsttings:RndringContxtSttings=nwRndringContxtSttings(tru);//获取绘图对象privatctx:RndringContxt=nwRndringContxt(this.sttings);//列出所要用到的图片privatimg:ImagBitmap=nwImagBitmap("