时间：2023-07-25 01:51:02 | 来源：网站运营
时间：2023-07-25 01:51:02 来源：网站运营
教你用canvas打造一个炫酷的碎片切图效果：
在线咨询
this.imgW = 800; // 图片原始宽this.imgH = 530; // 图片原始高this.conW = 800; // 画布宽this.conH = 530; // 画布高this.dw = 16; // 单元格宽this.dh = 15; // 单元格高this.I = this.conH / this.dh; //单元行数this.J = this.conW / this.dw; // 单元列数this.DW = this.imgW / this.J; // 原图单元宽this.DH = this.imgH / this.I; // 原图单元高「行数 = 画布高度 / 单元格高度；列数 = 画面宽度 / 单元格宽度」❝ drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)这个方法一共有9个参数，作用是在画布上绘制图像。看到这么多参数是不是已经被劝退了，哈哈
❞
HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas或 VideoFrame 。image 的矩形（裁剪）选择框的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。image 的矩形（裁剪）选择框的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。image 的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到 image 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。image的矩形（裁剪）选择框的高度。使用负值将翻转这个图像。image 的左上角在目标画布上 X 轴坐标。image 的左上角在目标画布上 Y 轴坐标。image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 宽度不会缩放。注意，这个参数不包含在 3 参数语法中。image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 高度不会缩放。注意，这个参数不包含在 3 参数语法中。class ChipBanner { constructor() { this.cvs = document.querySelector("#chip"); this.ctx = this.cvs.getContext("2d"); this.imgList = document.querySelectorAll(".bg"); this.imgIndex = 0; this.isAnimating = false; this.imgW = 800; //图片原始宽/高 this.imgH = 530; this.conW = 800; //画布宽/高 this.conH = 530; this.dw = 16; //画布单元宽/高 this.dh = 15; this.I = this.conH / this.dh; //单元行/列数 this.J = this.conW / this.dw; this.DW = this.imgW / this.J; //原图单元宽/高 this.DH = this.imgH / this.I; } init() { this.ctx.beginPath(); for (let i = 0; i < this.I; i++) { for (let j = 0; j < this.J; j++) { this.chipDraw(this.imgList[this.imgIndex], i, j); } } this.ctx.closePath(); this.ctx.stroke(); } drawText() { this.ctx.font = "150px serif"; this.ctx.strokeStyle = "white"; this.ctx.strokeText("1024", 500, 500); } chipDraw(img, i, j) { this.drawText(); //负责绘制，i: 单元行号；j: 单元列号 this.ctx.drawImage( img, this.DW * j, this.DH * i, this.DW, this.DH, this.dw * j, this.dh * i, this.dw, this.dh ); }}这里正确拼出来看到的和正常图片没有任何区别countAround(i, j, dst) { let arr = []; for (let m = i - dst; m <= i + dst; m++) { for (let n = j - dst; n <= j + dst; n++) { if ( Math.abs(m - i) + Math.abs(n - j) == dst && m >= 0 && n >= 0 && m <= this.I - 1 && n <= this.J - 1 ) { arr.push({ x: m, y: n }); } } } return arr; }chipClear(i, j) { this.ctx.clearRect(this.dw * j, this.dh * i, this.dw, this.dh);}start(i, j) { if (this.isAnimating) return; this.isAnimating = true; this.imgIndex++; if (this.imgIndex > this.imgList.length - 1) this.imgIndex = 0; let _this = this, dst = 0, timer = setInterval(() => { let resArr = _this.countAround(i, j, dst); resArr.forEach((item) => { _this.chipClear(item.x, item.y); // 清除单元格 _this.chipDraw(_this.imgList[_this.imgIndex], item.x, item.y); // 绘制下一张图片 }); if (!resArr.length) { clearInterval(timer); _this.isAnimating = false; } dst++; }, 30); }大功告成，这样就实现了一个炫酷的碎片式切图效果了～关键词：效果,打造
