【微信_小游戏_canvas_基础_笔记9】

最新推荐文章于 2024-09-19 16:39:47 发布

原创

最新推荐文章于 2024-09-19 16:39:47 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #javascript #前端 #游戏程序

本文记录了作者在尝试解析微信小游戏官方打飞机小游戏过程中遇到的问题，特别是在使用Canvas时，遇到的关于class中drawImage函数无法成功循环调用的难题。尽管未能解决问题，但作者决定回头填补之前的技能空白，分享基础的Canvas使用经验。

微信_小游戏_canvas_基础_笔记9

本来打算写解构官方的打飞机小游戏
奈何水平不够,而且自己也卡在其中,
始终无法成功循环调用 class 中的 drawimage 函数,
第一次OK,后续调用报错img没有数据,一直无法解决

休息了好几天,
自己挖的坑,自己埋
决定把之前埋的坑填了
在这里插入图片描述
废话不多说了,上代码


/** 画布基础数据 */
let ctx = canvas.getContext("2d");
let cw = ctx.canvas.width; // canvas 宽
let ch = ctx.canvas.height; // canvas 高
console.log("s11_ctx",cw,ch,ctx);

/** 建立需要引用的数据 */
let img_up = new Image();
let [img_up_width,img_up_height] = [0,0];
let img_dw = new Image();
let [img_dw_width,img_dw_height] = [0,0];

let i = 0; // 游动动作
let sp = 0; // 运动方向 0下移 1上移
let s = 8; // 运动步数 (决定鱼每帧移动距离))
let cx = cw/2; // 画布中起始x的位置
let cy = 0; // 画布中起始y的位置
wx.setPreferredFramesPerSecond(8)<