断断续续好几天,终于把canvas动态背景图插件搞定了,大体总结一下要点吧。
核心简介
除了面向对象,封装,其实最核心的还是canvas转换图片的功能,该部分代码如下:
//绘图
__draw(i, _width, _height, len) {
let _this = this;
//惰性载入
if(arguments.length) {
//全屏多图切换
this.__draw = function() {
_this.ctx.clearRect(0, 0, _width, _height);
_this.ctx.drawImage(_this.img, 0, 0, _width, _height);
(++i > len) && (i = 1);
return i;
}
} else {
//单图片位置切换
this.__draw = function() {
_this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.ctx.drawImage(_this.img, _this.width * _this.moveX, _this.height * _this.moveY, _this.width, _this.height,
_this.offsetX, _this.offsetY, _this.width * 2, _this.height * 2);
_this.moveX++;
_this.moveX %= _this.x;
_this.moveX % _this.x === 0 && (_this.moveY++);
_this.moveY %= _this.y;
}
}