我們在日常中進行上網(wǎng)沖浪的時候應(yīng)該有發(fā)現(xiàn)有部分的圖片會被分割成很多塊，那么今天我們就來講講：“怎么通過Canvas實現(xiàn)圖片分割？ ”這個問題吧！下面是小編整理的實現(xiàn)方法案例！
分析
首先我們可以發(fā)現(xiàn)圖片的內(nèi)容被分成了一個個小矩形，并對每個矩形進行了隨機平移。Canvas的drawImage函數(shù)可以對圖片內(nèi)容進行裁剪并繪制到Canvas畫布中，所以該效果主要實現(xiàn)原理就是使用drawImage。主要效果有兩個，一個是圖片內(nèi)容的打亂和復(fù)原，一個是和下張圖片的切換，這兩個效果都可以使用drawImage，只是移動的距離不一樣?？傮w思路有了那么就可以去著手實現(xiàn)一下。
初始工作
首先我們要初始化一些變量，比如圖片的寬高，矩形的個數(shù)，剪切的尺寸等，然后再計算每個矩形的坐標，使用一個二重循環(huán)將矩形坐標保存在data中。每個矩形有個隨機位移，這個位移也需要保存起來，存在randoms中。其中x,y表示canvas畫布的坐標，x1,y1表示圖片裁剪的坐標。
init: function (context, width, height, area, img) {
this.context = context;
this.img = img;
this.imgWidth = img[0].width; //圖片寬高
this.imgHeight = img[0].height;
this.index = 0; //當前圖片序號
this.width = width; //畫布寬高
this.height = height;
this.area = height/12; //小矩形長度
this.countX = width / this.area; //水平和垂直方向小矩形個數(shù)
this.countY = height / this.area;
this.wx = this.imgWidth / this.countX; //圖片在小矩形中的寬高
this.wy = this.imgHeight / this.countY;
this.state = true; //圖片狀態(tài)，true表示未拆分
this.dataFlag = true; //小矩形坐標狀態(tài)，true表示未加上隨機值
this.duration = 1000; //動畫時間
this.duration2 = 1500;
this.startTime = 0;
this.data = []; //小矩形坐標信息
this.randoms = []; //位置隨機值
//初始化矩形坐標
var x1 = 0, y1 = 0, x = 0, y = 0;
for (var i = 0; i < this.countY; i++) {
for (var j = 0; j < this.countX; j++) {
context.drawImage(this.img[this.index], x1, y1, this.wx, this.wy, x, y, this.area, this.area);
//儲存矩形坐標
this.data.push({
x1: x1,
y1: y1,
x: x,
y: y
});
//添加隨機值
this.randoms.push(random(-this.area, this.area));
x1 += this.wx;
x += this.area;
}
x1 = 0;
y1 += this.wy;
x = 0;
y += this.area;
}
this.checkMargin();
}檢測邊緣
在給矩形添加位移之前我們需要判斷一下位移后的坐標是否超過圖片界限，比如在頂部的矩形如果是y軸移動，那么只能夠向上移，判斷的條件為當前坐標加上位移值是否小于0或大于圖片的寬高。如果更新后的坐標小于0，那么這個隨機值一定是負數(shù)，需要把隨機值改為正數(shù)，如果大于圖片高度，那么改成負數(shù)即可。由于每個矩形的移動都是在一個方向上移動，所以我這里寫成偶數(shù)位移動x軸，奇數(shù)位移動y軸。
//檢測邊緣
checkMargin: function () {
var self = this;
this.data.forEach(function (item, index) {
if (index % 2 == 0) { // 下標為2的倍數(shù)時移動x軸，否則移動y軸
if ( item.x1 + self.randoms[index] < 0)
// 改為正數(shù)
self.randoms[index] = -self.randoms[index];
if (item.x1 + self.wx + self.randoms[index] > self.imgWidth )
// 改為負數(shù)
self.randoms[index] = -Math.abs(self.randoms[index])
} else {
if (item.y1 + self.randoms[index] < 0)
self.randoms[index] = -self.randoms[index];
if (item.y1 + self.randoms[index] + self.wy > self.imgHeight)
self.randoms[index] = -Math.abs(self.randoms[index])
}
})
}分離和復(fù)原
動畫的內(nèi)容的分離和復(fù)原就是更新矩形坐標的值，打亂內(nèi)容只要將data里的坐標加上隨機值，而復(fù)原就是減去隨機值，
//檢測邊緣
checkMargin: function () {
var self = this;
this.data.forEach(function (item, index) {
if (index % 2 == 0) { // 下標為2的倍數(shù)時移動x軸，否則移動y軸
if ( item.x1 + self.randoms[index] < 0)
// 改為正數(shù)
self.randoms[index] = -self.randoms[index];
if (item.x1 + self.wx + self.randoms[index] > self.imgWidth )
// 改為負數(shù)
self.randoms[index] = -Math.abs(self.randoms[index])
} else {
if (item.y1 + self.randoms[index] < 0)
self.randoms[index] = -self.randoms[index];
if (item.y1 + self.randoms[index] + self.wy > self.imgHeight)
self.randoms[index] = -Math.abs(self.randoms[index])
}
})
}在儲存好坐標后就可以去實現(xiàn)平移動畫了，移動的過程有一個平滑的過渡，我們可以使用Tween.js的緩動算法，該算法有4個參數(shù)分別是當前時間，初始位置，結(jié)束位置，動畫時間。詳細內(nèi)容可以參考張鑫旭的這篇文章https://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/ 。通過Tween.js可以算出每一幀要移動的距離，然后再使用requestAnimationFrame去更新坐標。
blockAnimation: function () {
var flag = 1;
if (this.state) { // 判斷是打亂圖片還是還原圖片
this.update(true)
} else {
flag = -1;
this.update(false);
}
var self = this;
this.startTime = +new Date(); // 獲取當前時間
this.state = !this.state;
(function animation() {
var t = +new Date();
if (t >= self.startTime + self.duration) { // 動畫結(jié)束條件
return false;
}
self.data.forEach(function (item, index) {
if (index % 2 == 0) {
var pos = Math.tween.Expo.easeInOut(t - self.startTime, 0, self.randoms[index] * flag, self.duration); // 計算出每幀移動的距離
self.context.drawImage(self.img[self.index], item.x1 + pos, item.y1, self.wx, self.wy, item.x, item.y, self.area, self.area);
} else {
var pos = Math.tween.Expo.easeInOut(t - self.startTime, 0, self.randoms[index] * flag, self.duration);
self.context.drawImage(self.img[self.index], item.x1, item.y1 + pos, self.wx, self.wy, item.x, item.y, self.area, self.area);
}
});
requestAnimationFrame(animation);
})();
}到這里就已經(jīng)實現(xiàn)了分離和復(fù)原的動畫了
圖片切換
接下來開始處理圖片切換的部分，這里跟輪播圖有點像，輪播圖動畫是將每個圖片位置移動可視窗口寬度的距離，這里也是一樣，只要將坐標加上圖片高度就可以實現(xiàn)y軸上的切換。和輪播圖不一樣的是，我們這里只有一個canvas標簽，在切換時只需要改變當前圖和下一張圖的坐標，當前圖移動距離為y1 + pos，下張圖移動距離為y1 + pos - imgHeight（為什么要減imgHeight就不用說了吧）。
//垂直滑動動畫
verticalAnimation: function (val) {
if (!this.time2) {
return false;
}
this.checkTime(2);
var self = this;
val ? val = 1 : val = -1; //判斷上滑還是下滑
if ((this.index + val) < 0 || (this.index + val) >= (this.img.length)) { //判斷圖片序號是否到底
return false;
}
this.state ? this.update(true) : this.update(false);
this.startTime = +new Date();
(function animation() {
var t = +new Date();
if (t >= self.startTime + self.duration2) {
val === 1 ? self.index++ : self.index--; //調(diào)整圖片順序
self.index < 0 ? self.index = self.img.length - 1 : self.index;
self.index >= self.img.length ? self.index = 0 : self.index;
return false;
}
self.data.forEach(function (item) {
var pos = Math.tween.Cubic.easeInOut(t - self.startTime, 0, (self.imgHeight) * val, self.duration2);
// 更新當前圖片坐標
self.context.drawImage(self.img[self.index], item.x1, item.y1 + pos, self.wx, self.wy, item.x, item.y, self.area, self.area);
// 更新下張圖片坐標
self.context.drawImage(self.img[self.index + val], item.x1, item.y1 + pos - self.imgHeight * val, self.wx, self.wy, item.x, item.y, self.area, self.area);
});
requestAnimationFrame(animation);
})()
}x軸的切換也是同理，現(xiàn)在所有功能都差不多完成了，完整代碼可以在codepen里查看。
以上就是今天小編和大家分享的有關(guān)于：“怎么通過Canvas實現(xiàn)圖片分割？”這個問題的實現(xiàn)方法和代碼分享，有喜歡html5這方面的特效的小伙伴們都可以在 W3Cschool中進行學(xué)習(xí)和來了解！
