这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了用 canvas 实现个图片三角化(LOW POLY)效果 的相关资料, 需要的朋友可以参考下
之前无意中看到 Ovilia 用 threejs 做了个 LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下。
我是没怎么用过 threejs,所以就直接用 canvas 的 2d 绘图 API 来做,因为感觉似乎这效果也用不上 threejs。
直接上 demo 先:http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html (也可以在移动端看,不过因为计算量比较大,移动设备计算起来会比 PC 要多花些时间。)
做这种效果主要需要把图片三角化,以及对图片进行边缘化检测。这两个,第一个用到的 delaunay 三角化算法,第二个用到的 sobel 边缘检测算法。听起来偷挺高大上的,索性两个算法都有相应的开源组件可以直接拿来用:ironwallaby 的 delaunay 组件 以及 Miguel Mota 的 sobel 组件。
这两个算法 sobel 还好一点,delaunay 就有点复杂了,待日后可以研究一下。不过目前只为做出个效果的话,还是可以用这些组件的。
两个最重要的组件都有了,剩下的事就很简单了:
先将图片绘制到 canvas 上:
- canvas.width = (img.width > 800) ? 800 : img.width;
- canvas.height = img.height * canvas.width/img.width;
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
然后获取到 canvas 的 imgData,再通过 sobel 计算返回新的 imgData
- var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- var newImgData = Sobel(imgData);
如果我们把 newImgData 放到 canvas 上,就会发现,彩色图片变成了这样的灰度图片:
由于上面说的那个 Sobel 组件不是很适合自己的用法,同时代码也有不恰当的地方,所以自己做了适当修改和优化,优化了循环方法,加快了运算速度,同时加入了回调函数。详见该项目 github 中的 sobel.js 文件
在 Sobel 方法中对 imgData.data 进行遍历的时候,会调用回调函数,在回调中把颜色值大于 40(也就是灰度为 rgb(40,40,40) 以上的)的坐标点记录下来。然后随机获取一部分边缘点,再加入一些随机出来的坐标 以及 四个边角的坐标值。这样,我们就可以获取到我们需要的坐标点了
- var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- // 收集色值大于40的边缘像素点
- var collectors = [];
- Sobel(imgData,
- function(value, x, y) {
- if (value > 40) {
- collectors.push([x, y]);
- }
- });
- // 添加一些随机点
- for (var i = 0; i < 300; i++) {
- particles.push([Math.random() * canvas.width, Math.random() * canvas.height]);
- }
- // 添加随机边缘点,数量为边缘点数量除于50
- var length = ~~ (collectors.length / 50),
- random;
- for (var l = 0; l < length; l++) {
- random = (Math.random() * collectors.length) << 0;
- particles.push(collectors[random]);
- collectors.splice(random, 1);
- }
- // 添加四顶点坐标
- particles.push([0, 0], [0, canvas.height], [canvas.width, 0], [canvas.width, canvas.height]);
获取到坐标点后,就可以通过 delaunay 组件计算,获取到拍好次序的三角坐标数组,对这些数组里的点进行连线,就可以出现这样的效果:
当然,我们要的效果不是连线,而是对所有三角形进行颜色填充,也就是获取三角形的三个坐标,然后计算出中心点的坐标,再根据中心点坐标在 imgData 里获取到相应的 rgb 的颜色值,然后填充到三角区域就可以了:
- // 使用delaunay三角化获取三角坐标
- var triangles = Delaunay.triangulate(particles);
- var x1,x2,x3,y1,y2,y3,cx,cy;
- for(var i=0;i < triangles.length; i+=3) {
- x1 = particles[triangles[i]][0];
- x2 = particles[triangles[i+1]][0];
- x3 = particles[triangles[i+2]][0];
- y1 = particles[triangles[i]][1];
- y2 = particles[triangles[i+1]][1];
- y3 = particles[triangles[i+2]][1];
- // 获取三角形中心点坐标
- cx = ~~((x1 + x2 + x3) / 3);
- cy = ~~((y1 + y2 + y3) / 3);
- // 获取中心点坐标的颜色值
- index = (cy*imgData.width + cx)*4;
- var color_r = imgData.data[index];
- var color_g = imgData.data[index+1];
- var color_b = imgData.data[index+2];
- // 绘制三角形
- ctx.save();
- ctx.beginPath();
- ctx.moveTo(x1, y1);
- ctx.lineTo(x2, y2);
- ctx.lineTo(x3, y3);
- ctx.closePath();
- ctx.fillStyle = "rgba("+color_r+","+color_g+","+color_b+",1)";
- ctx.fill();
- ctx.restore();
- }
上面有一点要注意,获取到的中心点坐标一定要取整,才能够获取到正确的颜色参数,如果想着不取整,而是在获取 rgb 索引的时候再取整,获取到的颜色值就是错的。因为这样获取到的那个像素点就不是我们要的中心像素点。
颜色也获取到后,就是简单的连线,然后填充操作了,最后出来的效果就是:
以上内容给大家介绍了用 canvas 实现个图片三角化(LOW POLY)效果 ,希望对大家有所帮助!
来源: http://www.phperz.com/article/17/0710/267088.html