开源鸿蒙 OpenHarmony 3.1画布解析，教你如何完成飞机大战小游戏

2月10日，IT之家消息，华为技术有限公司的姜英杰透露了开源鸿蒙系统OpenHarmony 3.1 Beta的一个关键特性，即ArkUI开发框架中的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组件的基本用法。

2.1.1 矩形填充

CanvasRenderingContext2D 对象提供了fillRect (x, y, width, height) 方法，用于绘制一个填充的矩形。如下图所示，在画布内绘制了一个黑色的填充矩形，

x 与y 指定了在canvas 画布上所绘制的矩形的左上角（相对于原点）的坐标，width 和height 则设置了矩形的尺寸。

示例代码如下：

//创建一个width=1500px，height=900px的画布

//xxx.jsexportdefault{onShow(){constel=this.$refs.canvas;//获取2D绘制对象constctx=el.getContext('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{onShow(){constel=this.$refs.canvas;constctx=el.getContext('2d');//设置绘制阴影的模糊级别ctx.shadowBlur=80;ctx.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 声明式开发范式中canvas 的绘制方法

声明式开发范式，采用TS 语言并进行声明式UI 语法扩展，从组件、动效和状态管理三个维度提供了UI 绘制能力，目前已经提供了canvas 组件绘制能力，但功能仍在完善中。

下面我们将通过两个示例展示声明式开发范式中canvas 组件的基础使用方法。

2.2.1 图片叠加

如下图所示，是三张图片叠加的效果，顶层的图片覆盖了底层的图片。通过依次使用drawImage (x,y, width, height) 方法设置图片坐标及尺寸，后面绘制的图片自动覆盖原来的图像，

从而达到预期效果。

扩展的TS 语言采用更接近自然语义的编程方式，让开发者可以直观地描述UI 界面，示例代码如下：

@Entry@ComponentstructIndexCanvas1{privatesettings:RenderingContextSettings=newRenderingContextSettings(true);//获取绘图对象privatectx:RenderingContext=newRenderingContext(this.settings);//列出所要用到的图片privateimg:ImageBitmap=newImageBitmap('common/bg.jpg');build(){Column(){//创建canvasCanvas(this.ctx).width(1500).height(900).border({color:'blue',width:1,}).backgroundColor('#ffff00')//开始绘制.onReady(()={this.ctx.drawImage(this.img,400,200,540,300);this.ctx.drawImage(this.img,500,300,540,300);this.ctx.drawImage(this.img,600,400,540,300);})}.width('100%').height('100%')}}2.2.2 点击创建线性渐变

如下图所示，是一个线性渐变效果。基于canvas 扩展了一个Button 组件，通过点击“Click”按钮，触发onClick () 方法，

并通过调用createLinearGradient () 方法，绘制出了一个线性渐变色。

示例代码如下：

@Entry@ComponentstructGradientExample{privatesettings:RenderingContextSettings=newRenderingContextSettings(true);privatecontext:RenderingContext=newRenderingContext(this.settings);privategra:CanvasGradient=newCanvasGradient();build(){Column({space:5}){//创建一个画布Canvas(this.context).width(1500).height(900).backgroundColor('#ffff00')Column(){//设置按钮的样式Button('Click').width(250).height(100).backgroundColor('#000000').onClick(()={//创建一个线性渐变色vargrad=this.context.createLinearGradient(600,200,400,750)grad.addColorStop(0.0,'red');grad.addColorStop(0.5,'white');grad.addColorStop(1.0,'green');this.context.fillStyle=grad;this.context.fillRect(400,200,550,550);})}.alignItems(HorizontalAlign.center)}}}飞机大战小游戏绘制实践如下图所示，

1. 首先列出游戏所用到的图片

privateimgList:Array=['xx.png','xx.png'…];2. 将图片渲染到canvas 画布上

letimg:ImageBitmap=newImageBitmap('图片路径（如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 函数随机获取敌机图片并渲染到画布上，

letimg:ImageBitmap=newImageBitmap('common/img'+this.imgList[Efight]);this.ctx.drawImage(img,0,this.Eheight+50);//渲染敌机5. 在页面每隔120s 出现一排子弹，

leti=0;setInterval(()={this.ctx.drawImage(this.bulImg1,image.x10(i*10),image.x+(i*10))this.ctx.drawImage(this.bulimg2,this.bulImg1,image.x(i*10),iimage.x+(i*10))this.ctx.drawImage(this.bulimg3,image.x+10+(i*10),image.x+(i*10))i++;},120)6. 使用onTouch 方法获取战机移动位置，

.onTouch((event)={varoffsetX=event.localX||event.touches[0].localX;varoffsetY=event.localY||event.touches[0].localY;varw=this.heroImg[0].width,h=this.heroImg[0].height;varnx=offsetX-w/2,ny=offsetY-h/2;nx20-w/2 nx=20-w/2:nx(this.windowWidth-w/2-20) nx=(this.windowWidth-w/2-20):0;ny0 ny=0:ny(this.windowHeight-h/2) ny=(this.windowHeighth/2):0;this.hero.x=nx;this.hero.y=ny;this.hero.count=2;注：本示例引用了部分开源资源，

以上就是本期全部内容，期待广大开发者能通过canvas 组件绘制出精美的图形，更多canvas 组件的详细使用方法，请参考文档进行学习：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-canvas-canvas-0000000000621808