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

大家好，今天来为大家解答开源鸿蒙OpenHarmony 3.1画布分析教你如何完成飞机大战小游戏这个问题的一些问题点，包括也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

canvas 介绍

1.1 什么是画布？

IT之家了解到，在网络浏览器中，canvas 是一个可自定义宽度和高度的矩形画布。画布的左上角是坐标原点，以像素为单位。水平向右为x 轴，垂直向下为y 轴。画布内的所有元素都基于原点定位。

如下图所示，我们可以通过标签创建一个宽度=1500px，高度=900px的空白画布。我们还需要一把“画笔”来绘制图形。 Canvas采用轻量级的逐像素渲染机制，使用JS作为“画笔”直接控制canvas像素实现图形绘制。

1.2 画布“画笔”

尽管canvas本身不具有绘图功能，但它提供了获取“画笔”的方法。开发者可以通过getContext('2d')方法获取CanvasRenderingContext2D对象来完成2D图像绘制，也可以通过getContext('webgl')方法获取WebGLRenderingContext对象来完成3D图像绘制。

此外，开发者还可以获取OffscreenCanvasRenderingContext2D对象进行离屏绘制。绘制方法与上面相同。当绘制的图形比较复杂时，频繁的删除和重画会消耗大量的性能。

此时开发者可以根据自己的需求灵活选择离屏渲染方式。首先创建一个OffscreenCanvas对象作为缓冲区，然后在OffscreenCanvas上绘制内容，最后将OffscreenCanvas绘制到主画布上，以提高画布性能。保证图纸质量。

canvas 基础绘制方法

2.1 类Web开发范式中的Canvas绘制方法

类似Web的开发范式，使用HML标签文件进行布局构建，CSS文件进行样式描述，JS语言进行逻辑处理。目前JS语言的canvas绘图功能已经基本完善。下面我们将通过两个例子来演示基于JS语言的canvas组件的基本用法。

2.1.1 矩形填充

CanvasRenderingContext2D 对象提供fillRect(x, y, width, height) 方法用于绘制填充矩形。如下图所示，画布中绘制了一个黑色填充的矩形。 x和y指定在画布上绘制的矩形的左上角（相对于原点）的坐标，宽度和高度设置矩形的大小。

示例代码如下：

//创建一个canvas，宽度=1500px，高度=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 对象提供缩放(x,y) 方法。参数x表示水平轴方向的缩放因子，y表示垂直轴方向的缩放因子。值得注意的是，在缩放过程中定位也会被缩放。如下图所示，上例中的填充矩形按比例(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.1 图像叠加

如下图所示，是三张图片叠加的效果。上面的图片覆盖了下面的图片。通过依次使用drawImage(x,y,width,height)方法设置图像坐标和尺寸，后面绘制的图像会自动覆盖原来的图像，从而达到想要的效果。

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

@Entry@ComponentstructIndexCanvas1{privatesettings:RenderingContextSettings=newRenderingContextSettings(true);//获取绘图对象privateectx: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);}) }。宽度('100%').高度('100%')}}

2.2.2 点击创建线性渐变

如下图所示，是一个线性渐变效果。 Button组件是基于canvas扩展的。通过点击“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,'绿色');this.context.fillStyle=grad;this.context.fillRect(400,200,550,550);})}.alignItems(HorizontalAlign.center)}}}

飞机大战小游戏绘制实践

如下图所示，是一款“飞机战”小游戏，通过控制战斗机的移动来摧毁敌方飞机。如何利用ArkUI开发框架提供的canvas组件轻松实现这款经典怀旧的游戏呢？实现思路和关键代码如下：

1.首先列出游戏中使用的图片

privateimgList:Array=['xx.png','xx.png'.];

2. 将图像渲染到画布上

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函数随机获取敌机的图片并渲染到画布上，并改变敌机的y轴坐标，使其向下移动。

Efight=Math.round(Math.random()*7);//前七张图片是敌机图片。 letimg:ImageBitmap=newImageBitmap('common/img'+this.imgList[Efight]);this.ctx.drawImage(img,0,this.Eheight+50);//渲染敌机

5、页面上每隔120秒就会出现一排子弹，然后减少或增加(x,y)轴的坐标，以达到子弹射击的效果。

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;

注：本示例引用了一些开源资源。有兴趣的开发者可以参考这个开源资源，根据文章中的实现思路完成代码。 (https://github.com/xs528/game)