你的位置:首页 > 软件开发 > Java > 用canvas 实现个图片三角化(LOW POLY)效果

用canvas 实现个图片三角化(LOW POLY)效果

发布时间:2016-02-18 14:00:10
转载: 之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下。   我是没怎么用过threejs,所以就直接用canvas的2d绘图API来做,因为感觉似乎这效果也用不上threejs。   ...

用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 实现个图片三角化(LOW POLY)效果

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。