从微信小程序到鸿蒙JS开发-canvas&stack&2048

更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com春节在家看听完张荣超老师的《从零开发鸿蒙小游戏APP》直播课（https://harmonyos.51cto.com/activity/17），完善了移动端的功能，实现了一个简单的2048小游戏。这里涉及到canvas和stack组件，这里做一下说明。效果图：1.Canvas组件canvas组件还有微信小程序，里面可以动态绘制图形和文字。在2048游戏中，不同的数字对应不同的背景色。如果使用动态样式，对判断和渲染的性能要求会很高。1.1获取绘图上下文组件给定一个id或ref，可以在js中获取组件的绘图上下文，通过获取到的进行绘制CanvasRenderingContext2D对象。官方文档提到获取绘图上下文的操作不支持在onInit和onReady中调用。经过实验，如果应用在onInit()中执行，屏幕会是空白的，在onReady()中也不会绘制画布中的内容，所以需要写在onShow()中。//绘制对象varcanvas;exportdefault{data:{...},onShow(){canvas=this.$element("canvas").getContext("2d");//绘制this.drawGrids();},...}对于全局将在多个方法中使用的变量，它们可以写入数据或外部导出。对于页面中不需要绑定的数据，写在export外可能会提高一点性能。1.2监听滑动事件canvas滑动的事件绑定是通过onswipe属性，官方文档没有说明，但是IDE有提示。该方法的输入参数，记录后结构如下：event.direction有四个值：up/down/left/right，可以用来判断滑动方向。1.3画一个矩形canvas.fillStyle="#ffffff";获取绘图上下文对象后，将其fillStyle属性设置为十六进制颜色，即可设置此绘图的颜色。您还可以使用createLinearGradient()提供渐变颜色，并使用createPattern()创建填充模板。canvas.fillRect(leftTopX,leftTopY,gridWidth,gridWidth);fillRect()方法用于绘制一个矩形，四个参数分别是左上角的X坐标、左上角的Y坐标、宽度和高度。1.4绘制文字canvas.font="70pxHYQiHei-65S";canvas.fillStyle=gridTxColors[gridVal];font属性指定文本的大小和字体，fillStyle指定文本的颜色。canvas.fillText(文本,leftBottomX,leftBottomY);fillText()方法用于绘制文本，三个参数分别是文本内容、左下角的X坐标、左下角的Y坐标。这里的最后两个参数是左下角，区别于微信小程序和刚才说的fillRect()。绘制2048个格子和文字的方法：//Drawgridsgrids：存储数字的二维数组；gridBgColors：存储网格背景颜色的对象；gridTxColors：存储文本颜色的对象drawGrids(){for(letr=0;r<4;r++){for(letc=0;c<4;c++){letgridVal=grids[r][c].toString();//绘制背景canvas.fillStyle=gridBgColors[gridVal];letleftTopX=c*(gridWidth+gridMargin)+gridMargin;letleftTopY=r*(gridWidth+gridMargin)+gridMargin;//左上角x左上角y宽高canvas.fillRect(leftTopX,leftTopY,gridWidth,gridWidth);//绘制文字canvas.font="70pxHYQiHei-65S";if(gridVal!="0"){if(gridVal=="2"||gridVal=="4"){canvas.fillStyle=gridTxColors[gridVal];}else{canvas.fillStyle=gridTxColors["其他"];}letoffsetX=(4-gridVal.length)*(gridWidth/8);letoffsetY=(gridWidth-fontSize)/2;//文字左下角x左下角ycanvas.fillText(gridVal,leftTopX+offsetX,leftTopY+offsetY+fontSize-5);}}}}，每次数字变化后，调用上面的方法绘制2048的效果。2.stack组件很有意思。栈中的子元素会被压入栈中，以达到堆叠的效果。一般都是通过z-index的方式来实现的，但是鸿蒙这里的实现是将数据结构的栈和页面层级结合起来，非常巧妙。游戏结束时提示文字会覆盖网格区域：游戏结束