2月10日，IT之家消息，华为技术有限公司的姜英杰透露了开源鸿蒙系统OpenHarmony 3.1 Beta的一个关键特性，即ArkUI开发框架中的canvas canvas。
据介绍，canvas是ArkUI开发框架中的一个canvas组件，常用于自定义绘制图形。由于其轻量级、灵活性和高效性，被广泛应用于UI界面开发中。本期我们将向大家介绍ArkUI开发框架中canvas组件的使用。
画布介绍1.1什么是画布？
IT之家了解到，在Web浏览器中，canvas是一个可定制宽度和高度的矩形画布。画布左上角是坐标原点，以像素为单位。水平右轴是X轴，垂直下轴是Y轴。画布中的所有元素都基于原点定位。
如下图所示，我们可以通过标签创建一个宽度=1500px，高度=900px的空白画布。我们还需要一个“画笔”来绘制图形。Canvas采用轻量级的逐像素渲染机制，JS作为“画笔”直接控制画布像素，从而实现图形渲染。
1.2画布的“画笔”
Canvas本身不具备绘画能力，但它提供了一种获取“画笔”的方式。开发人员可以通过getContext ('2d ')方法获取CanvasRenderingContext2D对象来完成2D图像绘制，或者通过getContext ('webgl ')方法获取WebGLRenderingContext对象来完成3D图像绘制。
目前，ArkUI开发框架中的WebGL1.0和WebGL2.0的标准三维图形渲染能力正在不断完善，因此本文将重点研究2D图像渲染。如下图所示，是CanvasRenderingContext2D对象提供的部分2D图像绘制方法。丰富的绘图方法使开发者能够绘制矩形、文本、图片等。高效地。
另外，开发者可以通过获取OffScreenCanvasRenderingContext 2D对象来进行离屏绘制，绘制方法同上。当绘制的图形比较复杂时，频繁的删除和重绘会消耗很多性能。
这时候开发者可以根据自己的需求灵活选择离屏渲染方式。他们首先创建一个OffscreenCanvas对象作为缓冲，然后在OffscreenCanvas上绘制内容，最后在主画布上绘制OffscreenCanvas，画布性能为提高，这样可以保证绘制质量。
画布的基本绘制方法通过上一节对画布组件的基本介绍，相信你对画布组件有了一定的了解。下面，我们将实际演示如何在ArkUI的开发框架中使用canvas组件。ArkUI开发框架是指Web浏览器中canvas的设计，提供两种开发范式：“类Web开发范式”和“声明式开发范式”。接下来，我们将分别介绍这两种开发范式下画布的绘制方法。
2.1 Web开发范式下画布的绘制方法
类似Web的开发范式，使用HML标签文件进行布局构建，使用CSS文件进行风格描述，使用JS语言进行逻辑处理。目前JS语言的画布绘制功能已经基本完善。在这里，我们将通过两个例子展示基于JS语言的canvas组件的基本用法。
矩形填充
CanvasRenderingContext2D对象提供fillRect (x，y，width，height)方法，用于绘制填充的矩形。如下图所示，画布中绘制了一个黑色填充的矩形。x和Y指定在画布上绘制的矩形左上角(相对于原点)的坐标，而宽度和高度设置矩形的大小。
示例代码如下：
//创建一个宽度=1500像素、高度=900像素的画布
//XXX . jsexportdefault { on show(){ constel=this。$ refs.canvas//获取2D绘图对象const CTX=El . Get context(' 2d ')；//将填充设置为黑色ctx.fillStyle=' # 000000//设置填充矩形的坐标和大小ctx.fillRect(200，200，300，300)；}}2.1.2缩放和阴影
CanvasRenderingContext2D对象提供了scale (x，y)方法。参数x表示水平轴方向的比例因子，y表示垂直轴方向的比例因子。值得注意的是，在缩放过程中，定位也会被缩放。如下图所示，上例中的填充矩形按scale (2，1.5)缩放，并用shadowBlur方法着色。
示例代码如下：
//XXX . jsexportdefault { on show(){ constel=this。$ refs.canvasconst CTX=El . get context(' 2d ')；//设置绘制阴影的模糊等级ctx.shadowBlur=80ctx.shadowColor='rgb(0，0，0)'ctx.fillStyle='rgb(0，0，0)'//xScaleto200%，yScaleto150%ctx.scale(2，1.5)；ctx.fillRect(200，200，300，300)；}}2.2声明式开发范式下画布的绘制方法
声明式开发范式，采用TS语言，扩展声明式UI语法，从组件、动态效果、状态管理三个维度提供UI绘制能力。目前已经提供了canvas组件绘制能力，但功能还在不断完善中。下面，我们将通过两个例子展示canvas组件在声明式开发范式中的基本用法。
图像叠加
如下图所示，是三张图片的叠加效果，上面的图片覆盖下面的图片。通过依次使用drawImage (x，y，width，height)方法设置图片的坐标和尺寸，后期绘制的图片会自动覆盖原图片，从而达到想要的效果。
扩展的TS语言采用了更接近自然语义的编程方式，使得开发者可以直观地描述UI界面。示例代码如下：
@ Entry @ componentstructionindexcanvas 1 { private settings:RenderingContextSettings=newRenderingContextSettings(true)；//获取绘图对象private CTX:Rendering Context=new Rendering Context(this . settings)；//列出要使用的图像：private img:image bitmap=new image bitmap(' common/BG . jpg ')；Build(){Column(){//创建画布canvas (this.ctx)。宽度(1500)。身高(900)。边框({color:'蓝色'宽度：1，})。background color(' # ffff 00 ')//开始绘制.this.ctx.drawImage(this.img，500，300，540，300)；this.ctx.drawImage(this.img，600，400，540，300)；}}}.宽度(' 100% ')。高度(' 100%')}} 2.2.2单击创建线性渐变。
如下图所示，是线性渐变效果。基于canvas扩展了一个按钮组件。通过点击“click”按钮，触发onClick()方法，通过调用createLinearGradient()方法绘制线性渐变。
示例代码如下：
@ Entry @ ComponentstructGradientExample { private settings:RenderingContextSettings=newRenderingContextSettings(true)；private context:rendering context=newRenderingContext(this . settings)；private gra:canvas gradient=newCanvasGradient()；Build(){Column({space:5}){//创建画布canvas (this.context)。宽度(1500)。身高(900)。background color(' # ffff 00 ')column(){//设置按钮button ('click ')的样式。宽度。身高(100)。background color(# 00000)。onclick(()={//创建线性渐变vargrad=this . context . CreateLineargradient(600，200，400，750) grad。AddColorStop (0.0，)grad.addColorStop(0.5，'白色')；grad.addColorStop(1.0，'绿色')；this . context . fill style=grad；this.context.fillRect(400，200，550，550)；}}}.对齐项目(水平对齐。center)}}飞机战争游戏的画图练习如下图所示。它是一款“飞机战争”游戏，通过控制战斗机的移动来摧毁敌机。如何使用ArkUI开发框架提供的canvas组件轻松实现这款经典怀旧小游戏？实现思路和关键代码如下：
1.先列出游戏中用到的图片。
privateimgList:Array=['xx.png '' xx . png '…]；2.将图片渲染到画布上
letg:image bitmap=new image bitmap('图像路径(如common/images)/' this.imgList[数组下标])；This.ctx.drawImage(img，150/*x坐标*/，150/*y坐标*/，600/*宽度*/，600/*高度*/)3 .画出背景图和战斗机下移的效果。
this.ctx.drawImage(this.bg，0，this . bgy)；this.ctx.drawImage(this.bg，0，this . bgy-480)；this . bgy==480(this . bgy=0)；4.使用Math.round函数随机获取敌机的图片并渲染到画布上，改变敌机的Y轴坐标使其下移。
e打架=数学。圆(数学。random()* 7)；//前七张为敌机图片letimg:image bitmap=新图像位图(' common/img ' this。img list[e fight])；this.ctx.drawImage(img，0，this .e身高50)；//渲染敌机5.在页面每隔120秒出现一排子弹，之后减小或增大(x，y)轴的坐标达到子弹射出效果。
leti=0；setInterval(()={ this。CTX。绘制图像(this.bulImg1，image。x10-(I * 10)，图像。x(I * 10))这个。CTX。画图像(这个。布林格2号，这个。建筑1，形象。x-(I * 10)，ii图像。x(I * 10))这个。CTX。画图像(这个。bulimg 3，image.x 10 (i*10)，image。x(I * 10))I；},120)6.使用onTouch方法获取战机移动位置，获取拖动的坐标后重新设置战机的图片坐标，使战机实现拖动效果。on touch((event)={ varoffsetX=event。localx | |事件。触摸[0].localXvaroffsetY=事件。本地| |事件。触摸[0].当地；varw=this.heroImg[0].宽度，h=this.heroImg[0].身高；varnx=offsetX-w/2，ny=offsetY-h/2；nx20-w/2 NX=20-w/2:NX(这个。窗宽-w/2-20)NX=(这个。窗宽-w/2-20):0；ny0 ny=0:ny(这个。窗高-h/2)ny=(这个。窗高-h/2):0；这个。英雄。x=NX这个。英雄。y=ny这个。英雄。计数=2；注：本示例引用了部分开源资源，感兴趣的开发者可参考此开源资源，结合文中的实现思路补全代码https://github.com/
xs528/game)
以上就是本期全部内容，期待广大开发者能通过帆布组件绘制出精美的图形，更多帆布组件的详细使用方法，请参考文档进行学习：
https://开发商。和谐OS。com/cn/docs/documentation/doc-references/js-components-canvas-canvas-00000000621808
