标签：
之前无意中看到
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上，就会发现，彩色图片变成了这样的灰度图片：
图片处理好后，再对imgData进行遍历，把颜色值大于40（也就是灰度为rgb(40,40,40)以上的）的坐标点记录下来。因为我们要随机选取一些处于边缘的坐标点，所以对收集的坐标进行打乱，再加入一些随机出来的坐标 以及 四个边角的坐标值。这样，我们就可以获取到我们需要的坐标点了
var collectors = []; var index; // 收集色值大于40的边缘点 for(var x=0;x<imgData.width;x++){ for(var y=0;y<imgData.height;y++){ index = ~~(y*imgData.width + x)*4; if(newImgData.data[index] > 40){ collectors.push([x , y]); } } } // 对收集到的点随机排列 collectors.sort(function(){return Math.random()-Math.random()}); // 添加一些随机点 for(var i=0;i<500;i++){particles.push([Math.random()*canvas.width , Math.random()*canvas.height]);} // 添加边缘点 particles = particles.concat(collectors.slice(0,~~(collectors.length/50))); // 添加四顶点坐标 particles = particles.concat([[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索引的时候再取整，获取到的颜色值就是错的。因为这样获取到的那个像素点就不是我们要的中心像素点。
颜色也获取到后，就是简单的连线，然后填充操作了，最后出来的效果就是：
虽然没有设计师手动描出来的好看，不过也方便很多，做来玩玩还是挺有意思的。
源码地址，有兴趣的可以一看哈：
https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Funny-demo/lowpoly
标签：
原文地址：http://www.cnblogs.com/axes/p/4605474.html
