通过网页里的canvas写一个QQ迷你屋小功能，可以加载多个GIF，并可以操作这么GIF动画和JPG等图片。
定义Game类，来获得指定的canvas来设置这个canvas宽高，并通过requestAnimationFrame定时器来让canvas不停刷新，并显示次数
查看案例>>
var Game = function(params) {
var GObj = this;
//传参数数组
this.params = params;
//获得画面
this.canvas = document.getElementById(params.id);
//上下文
this.ctx = this.canvas.getContext("2d");
var setCanvasWidth = document.documentElement.clientWidth;
var setCanvasHeight = document.documentElement.clientHeight;
if (params.width != undefined) this.setCanvasWidth = params.width; //自定义canvas宽
if (params.height != undefined) this.clientHeight = params.height; //自定义canvas高
//让canvas匹配视口
this.canvas.width = setCanvasWidth //$(window).width();//730;
this.canvas.height = setCanvasHeight //$(window).height();//414;
//帧编号
this.fno = 0;
this.frame = function() {
GObj.fno++;
//清屏
GObj.ctx.clearRect(0, 0, GObj.canvas.width, GObj.canvas.height);
//打印帧编号
GObj.ctx.save();
GObj.ctx.font = "16px consolas";
GObj.ctx.fillStyle = "red";
GObj.ctx.fillText("FNO:" + GObj.fno, 40, 20);
GObj.ctx.restore();
requestAnimationFrame(GObj.frame);
}
this.frame();//放到最后执行
}
new Game({ id: "mycanvas" })
使用libgif.js库加载gif动画到canvas里
查看案例>>
var Game = function(params) {
var GObj = this;
//公共类
GObj.public = new Public(GObj);
//传参数对象
this.params = params;
//获得画面
this.canvas = document.getElementById(params.id);
//上下文
this.ctx = this.canvas.getContext("2d");
var setCanvasWidth = document.documentElement.clientWidth;
var setCanvasHeight = document.documentElement.clientHeight;
if (params.width != undefined) this.setCanvasWidth = params.width; //自定义canvas宽
if (params.height != undefined) this.clientHeight = params.height; //自定义canvas高
//设置canvas宽高
this.canvas.width = setCanvasWidth
this.canvas.height = setCanvasHeight
GObj.R = {};
GObj.R["mcobj"] = {};
//帧编号
this.fno = 0;
this.rootZoom = 0; //缩放20230812
this.zoomRatio = 0; //缩放比率20230812
this.frame = function() {
GObj.ctx.clearRect(0, 0, GObj.canvas.width, GObj.canvas.height);
GObj.fno++;
//场景管理器的渲染和更新
GObj.gif.update();
GObj.gif.render();
//清屏
//打印帧编号
GObj.ctx.save();
GObj.ctx.font = "16px consolas";
GObj.ctx.fillStyle = "red";
GObj.ctx.fillText("FNO:" + GObj.fno, 40, 20);
GObj.ctx.restore();
requestAnimationFrame(GObj.frame);
}
// this.sm = new SceneManager(this, this.MCjsonUrl); //当前句柄给它
this.gif = new MCimg(GObj, { name: "/article/images/canvas/canvas-qqhouse/1.GIF", x: 200, y: 50 })
this.frame(); //放到最后执行
}
var MCimg = function(_this, configData) {
var GObj = _this;
this.cutx = 0; // x位置
this.cuty = 0; // y位置
this.cutw = null; // 宽
this.cuth = null; // 高
this.x = 0; // x位置
this.y = 0; // y位置
this.w = null; // 宽
this.h = null; // 高
this.imgArrIndex = -1; //当前播放索引20230810
this.speed = 10; //速度20230810
if (configData != undefined) {
if (configData.name != undefined && configData.name != "") this.imgName = configData.name;
if (configData.x != undefined && configData.x != "") this.x = configData.x;
if (configData.y != undefined && configData.y != "") this.y = configData.y;
}
var _self = this;
var kName = "img" + md5(this.imgName);
if (GObj.R.mcobj[kName] != undefined) {
this.imgArr = GObj.R.mcobj[kName].imgarr;
} else {
GObj.R.mcobj[kName] = { imgarr: [] }; //先创建一个空配置
this.imgArr = GObj.R.mcobj[kName].imgarr;
let img = new Image();
var sLeft1 = this.imgName.substr(0, 1);
// console.log("sLeft1",sLeft1);
if (sLeft1 != "." && sLeft1 != "/" && sLeft1 != "\\") {
img.src = 'R/img/images/' + this.imgName;
} else {
img.src = this.imgName;
}
img.onload = function() {
var superGif = new SuperGif({ gif: img });
GObj.R.mcobj[kName].imgarr.push(img);
superGif.load(function() {
for (var i = 1; i < superGif.get_length(); i++) { //第一帧已经在上面添加了，20230817 这回就流畅了
superGif.move_to(i)
var sImg = superGif.get_canvas().toDataURL('image/png');
let imgx = new Image();
imgx.src = sImg
imgx.onload = function() {
// _self.imgArr.push(imgx)
GObj.R.mcobj[kName].imgarr.push(imgx);
// console.log("_self.imgArr",_self.imgArr)
}
}
});
}
}
this.update = function() {
}
//渲染
this.render = function() {
//画图
GObj.ctx.save();
GObj.ctx.globalAlpha = this.tutorialOpacity; //透明度
if (GObj.fno % this.speed == 0) {
this.imgArrIndex++
// console.log("this.imgArrIndex", this.imgArrIndex);
}
if (this.imgArrIndex >= this.imgArr.length || this.imgArrIndex < 0) this.imgArrIndex = 0;
// console.log("this.imgArrIndex", this.imgArrIndex, this.imgArr.length, this.imgArr);
var imgbase64 = this.imgArr[this.imgArrIndex];
if (imgbase64 != undefined) {
let img = imgbase64
var w = img.width;
var h = img.height;
if (this.w == null) {
this.w = w;
}
if (this.h == null) {
this.h = h;
}
var newW = w;
var newH = h;
if (this.w != null) newW = this.w;
if (this.h != null) newH = this.h;
if (this.cutw != null) { w = this.cutw; }
if (this.cuth != null) h = this.cuth;
var nX = this.x;
var nY = this.y;
GObj.ctx.drawImage(img, this.cutx, this.cuty, w, h, nX, nY, newW, newH);
GObj.ctx.restore();
}
}
}
new Game({ id: "mycanvas" })