Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "how to achieve image segmentation through Canvas in html5". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to achieve image segmentation through Canvas in html5" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

analysis

First, we can see that the content of the image is divided into small rectangles, and each rectangle is randomly translated. Canvas drawImage function can crop the image content and draw it to Canvas canvas, so the main principle of this effect is to use drawImage. There are two main effects, one is the disruption and restoration of the image content, and the other is the switching with the next image. These two effects can be used drawImage, but the distance of movement is different. Now that you have the general idea, you can start to realize it.

initial work

First we initialize some variables, such as the width and height of the image, the number of rectangles, the size of the clip, etc. Then we calculate the coordinates of each rectangle and use a double loop to save the coordinates of the rectangle in data. Each rectangle has a random displacement, and this displacement needs to be saved, too, in randoms. where x,y represent the coordinates of the canvas, and x1,y1 represent the coordinates of the image crop.

init: function (context, width, height, area, img) { this.context = context; this.img = img; this.imgWidth = img[0].width; //Picture width and height this.imgHeight = img[0].height; this.index = 0; //current picture number this.width = width; //Canvas Width and Height this.height = height; this.area = height/12; //Small rectangle length this.countX = width / this.area; //Number of small rectangles horizontally and vertically this.countY = height / this.area; this.wx = this.imgWidth / this.countX; //Picture width and height in small rectangle this.wy = this.imgHeight / this.countY; this.state = true; //picture status, true means not split this.dataFlag = true; //small rectangular coordinate state, true means no random value is added this.duration = 1000; //Animation time this.duration2 = 1500; this.startTime = 0; this.data = []; //small rectangular coordinate information this.randoms = []; //position random value //Initialize rectangular coordinates 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，那么这个随机值一定是负数，需要把随机值改为正数，如果大于图片高度，那么改成负数即可。由于每个矩形的移动都是在一个方向上移动，所以我这里写成偶数位移动x轴，奇数位移动y轴。 //检测边缘 checkMargin: function () { var self = this; this.data.forEach(function (item, index) { if (index % 2 == 0) { // 下标为2的倍数时移动x轴，否则移动y轴 if ( item.x1 + self.randoms[index] < 0) // 改为正数 self.randoms[index] = -self.randoms[index]; if (item.x1 + self.wx + self.randoms[index] >

self.imgWidth ) //changed to negative 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]) } }) }

Separation and recovery

Separation and restoration of animation content is to update the value of rectangular coordinates, scramble content as long as the coordinates in data add random values, and restoration is to subtract random values,

//detect edges checkMargin: function () { var self = this; this.data.forEach(function (item, index) { if (index % 2 == 0) { //move x axis if index is a multiple of 2, otherwise move y axis if ( item.x1 + self.randoms[index]

< 0) // 改为正数 self.randoms[index] = -self.randoms[index]; if (item.x1 + self.wx + self.randoms[index] >

self.imgWidth ) //changed to negative 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]) } }) }

在储存好坐标后就可以去实现平移动画了，移动的过程有一个平滑的过渡，我们可以使用Tween.js的缓动算法，该算法有4个参数分别是当前时间，初始位置，结束位置，动画时间。通过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) { // 动画结束条件 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); })(); }

到这里就已经实现了分离和复原的动画了

图片切换

接下来开始处理图片切换的部分，这里跟轮播图有点像，轮播图动画是将每个图片位置移动可视窗口宽度的距离，这里也是一样，只要将坐标加上图片高度就可以实现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)) { //determine whether the picture number is the end 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--; //Adjust image order 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); //update current picture coordinates self.context.drawImage(self.img[self.index], item.x1, item.y1 + pos, self.wx, self.wy, item.x, item.y, self.area, self.area); //Update the coordinates of the next picture 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); })() } Read here, this article "how to achieve image segmentation through Canvas in html5" article has been introduced, want to master the knowledge points of this article also need to be used by yourself to understand, if you want to know more related content articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.