arkui开发框架中canvas组件的使用( 三 ) IT之家2月10日消息

文章图片

文章图片

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函数随机获取敌机图片并渲染到画布上，并且改变敌机y轴坐标，使它向下运动。
Efight=Math.round(Math.random()*7);//前七张为敌机图片。letimg:ImageBitmap=newImageBitmap("common/img"+this.imgList[Efight]);this.ctx.drawImage(img,0,this.Eheight+50);//渲染敌机
5.在页面每隔120s出现一排子弹，之后减小或增大（x,y）轴的坐标达到子弹射出效果。
leti=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),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;nx(this.windowWidth-w/2-20)?nx=(this.windowWidth-w/2-20):0;ny(this.windowHeight-h/2)?ny=(this.windowHeight–h/2):0;this.hero.x=nx;this.hero.y=ny;this.hero.count=2;
注：本示例引用了部分开源资源，感兴趣的开发者可参考此开源资源，结合文中的实现思路补全代码。