color|开源鸿蒙 OpenHarmony 3.1画布解析，教你如何完成飞机大战小游戏( 二 ) 任正非|公司|分红|华为|股票

文章插图

扩展的 TS 语言采用更接近自然语义的编程方式，让开发者可以直观地描述 UI 界面，示例代码如下：
@Entry@Componentstruct IndexCanvas1 {private settings:RenderingContextSettings = new RenderingContextSettings(true);//获取绘图对象private ctx: RenderingContext = new RenderingContext(this.settings);//列出所要用到的图片private img:ImageBitmap = new ImageBitmap("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@Componentstruct GradientExample {private settings: RenderingContextSettings = new RenderingContextSettings(true);private context: RenderingContext = new RenderingContext(this.settings);private gra: CanvasGradient = new CanvasGradient();build() {Column({ space: 5 }){//创建一个画布Canvas(this.context).width(1500).height(900).backgroundColor('#ffff00 ')Column() {//设置按钮的样式Button('Click').width(250).height(100).backgroundColor('#000000').onClick(() => {//创建一个线性渐变色var grad = 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)}} }飞机大战小游戏绘制实践如下图所示，是一款”飞机大战”小游戏，通过控制战机的移动摧毁敌机。如何使用 ArkUI 开发框架提供的 canvas 组件轻松实现这个经典怀旧的小游戏？实现思路及关键代码如下：

文章插图

1. 首先列出游戏所用到的图片
private imgList:Array = ["xx.png","xx.png"…];2. 将图片渲染到 canvas 画布上
let img:ImageBitmap = new ImageBitmap("图片路径（如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);//前七张为敌机图片。let img:ImageBitmap = new ImageBitmap("common/img"+this.imgList[Efight]);this.ctx.drawImage(img, 0, this.Eheight + 50);//渲染敌机5. 在页面每隔 120s 出现一排子弹，之后减小或增大（x,y）轴的坐标达到子弹射出效果。
let i= 0;setInterval(()=>{this.ctx.drawImage(this.bulImg1,image.x – 10 – (i *10) , image.x + (i *10))this.ctx.drawImage(this.bulimg2, this. bulImg1,image.x – (i *10) , i image.x + (i *10))this.ctx.drawImage(this.bulimg3, image.x + 10 + (i *10), image.x + (i *10))i ++;},120)6. 使用 onTouch 方法获取战机移动位置，获取拖动的坐标后重新设置战机的图片坐标，使战机实现拖动效果。
.onTouch((event)=>{var offsetX = event.localX ||event.touches[0].localX;var offsetY = event.localY ||event.touches[0].localY;var w = this.heroImg[0].width,h = this.heroImg[0].height;var nx = offsetX - w / 2,ny = offsetY - h / 2;nx < 20 - w / 2 ? nx = 20 - w / 2 : nx > (this.windowWidth - w / 2 - 20) ? nx =(this.windowWidth - w / 2 - 20) : 0;ny < 0 ? ny = 0 : ny > (this.windowHeight - h / 2) ? ny = (this.windowHeight –h/2) : 0;this.hero.x = nx;this.hero.y = ny;this.hero.count = 2;注：本示例引用了部分开源资源，感兴趣的开发者可参考此开源资源，结合文中的实现思路补全代码。（https://github.com/ xs528 / game）
以上就是本期全部内容，期待广大开发者能通过 canvas 组件绘制出精美的图形，更多 canvas 组件的详细使用方法，请参考文档进行学习：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-canvas-canvas-0000000000621808