之前無意中看到Ovilia用threejs做了個LOW POLY，也就是圖片平面三角化的效果，覺得很驚艷，然後就自己花了點時間嘗試了一下。 我是沒怎麼用過threejs，所以就直接用canvas的2d繪圖API來做，因為感覺似乎這效果也用不上threejs。 直接上demo先：http://whxa...
之前無意中看到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
|
如果我們把newImgData放到canvas上，就會發現，彩色圖片變成了這樣的灰度圖片：
