cocos creator 可以通过新建一个creator项目进行添加子域项目，但是有一个缺点就是占用文件大小是一个问题，所以我这里采用微信的API进行绘制排行榜，
主域就是各种发送给子域的消息，这里不再这里赘述，就是各种调用微信的API
这里给出微信的API
微信开放数据域
新建main.js
目录结构如下：
main.js
export default class Main{constructor(){this.canvas = wx.createCanvas();this.context = this.canvas.getContext('2d');console.log(this.canvas.width,this.canvas.height);this.drawRect(0,0,this.canvas.width,this.canvas.height,'white');}/***@param offsetX : 距离屏幕的左边的距离*@param offsetY : 距离屏幕上边的距离 *@param width : 要绘制的画面的宽度@param height : 要绘制画面的高度@param color : 要绘制画面的颜色 */drawRect(offsetX,offsetY,width,height,color){this.context.fillStyle = color;this.context.fillRect(offsetX, offsetY, width, height);}//绘制文本drawText(offsetX,offsetY,content,color,fontSize){this.context.fillStyle = color;this.context.font = fontSize;this.context.fillText(content,offsetX,offsetY);}//绘制图片 void ctx.drawImage(image, dx, dy, dWidth, dHeight);drawImage(image,dx,dy,dWidth,dHeight){this.context.drawImage(image,dx,dy,dWidth,dHeight);}}
game.js
import Main from './js/main'let main = new Main();//一行的高度，宽度，间距let List = {WIDTH: main.canvas.width * 6 / 9,HEIGHT : main.canvas.height / 11,//行的间距OFFSET : main.canvas.height / 28,//起始x 坐标STARTX : 60,//起始Y 坐标STARTY : 60,//该行背景色COLOR: '',//一行中字体的颜色FONTCOLOR : '',FONTESTYLE : '20px serif',FONTTOP : 40,IMAGETOP : 5,IMAGEWIDTH : 50,IMAGEHEIGHT : 50,}//可以容纳的行数let ROWNUMBER = Math.floor((main.canvas.height - List.STARTY) / (List.HEIGHT + List.OFFSET));console.log("可以容纳的最大的行数是：",ROWNUMBER);//需要显示出来的数据let Data = [{RANK : 1,imageUrl : "头像地址",nickname : '昵称',score : '210'},{RANK: 2,imageUrl: "头像地址",nickname: '昵称',score: '220'},{RANK: 3,imageUrl: "头像地址",nickname: '昵称',score: '210'},{RANK: 4,imageUrl: "头像地址",nickname: '昵称',score: '220'},{RANK: 5,imageUrl: "头像地址",nickname: '昵称',score: '210'},{RANK: 6,imageUrl: "头像地址",nickname: '昵称',score: '220'}]//绘制底图main.drawRect(50, 50, main.canvas.width * 3 / 4, main.canvas.height * 3 / 4,'#6969FF');//绘制排名行for(let i = 0;i < Data.length;i++){if(i % 2 === 0 ){List.COLOR = '#D8BFD8';List.FONTCOLOR = '#ffffff';}else{List.COLOR = '#D3D3D3'List.FONTCOLOR = '#ec0063';}main.drawRect(List.STARTX, List.STARTY + i*(List.HEIGHT + List.OFFSET), List.WIDTH, List.HEIGHT, List.COLOR);//绘制数据中的内容let dataItem = Data[i];// drawText(offsetX, offsetY, content, color, fontSize)main.drawText(List.STARTX + 5,List.STARTY + List.FONTTOP + i *(List.HEIGHT + List.OFFSET),dataItem.RANK,List.FONTCOLOR,List.FONTESTYLE);let imagePromise = new Promise(function(resolve,reject){//绘制图像内容let image = wx.createImage();image.src = dataItem.imageUrl;image.onload = function () {resolve(image);}});imagePromise.then(function(image){console.log("image is ",image);// drawImage(image, dx, dy, dWidth, dHeight)main.drawImage(image, List.STARTX + 30, List.STARTY + List.IMAGETOP + i * (List.HEIGHT + List.OFFSET), List.IMAGEWIDTH, List.IMAGEHEIGHT);});//绘制昵称main.drawText(List.STARTX + 93, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.nickname, List.FONTCOLOR, List.FONTESTYLE);main.drawText(List.STARTX + 190, List.STARTY + List.FONTTOP + i * (List.HEIGHT + List.OFFSET), dataItem.score, List.FONTCOLOR, List.FONTESTYLE);}// main.drawText(65,100,'1','white','25px serif');
