位置: 编程技术 - 正文
用canvas 实现个图片三角化（LOW POLY）效果(canvas实例)
发布时间：2024-02-27推荐整理分享用canvas 实现个图片三角化（LOW POLY）效果(canvas实例)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:canvas使用教程,canvas实例,canvas实现画图,canvas实现画图,canvas如何使用,canvas实现画图,canvas实现画图,canvas实现画图,内容如对您有帮助，希望把文章链接给更多的朋友！
之前无意中看到Ovilia 用threejs做了个LOW POLY，也就是图片平面三角化的效果，觉得很惊艳，然后就自己花了点时间尝试了一下。
我是没怎么用过threejs，所以就直接用canvas的2d绘图API来做，因为感觉似乎这效果也用不上threejs。
直接上demo先： （也可以在移动端看，不过因为计算量比较大，移动设备计算起来会比PC要多花些时间。）
做这种效果主要需要把图片三角化，以及对图片进行边缘化检测。这两个，第一个用到的delaunay三角化算法，第二个用到的sobel边缘检测算法。听起来偷挺高大上的，索性两个算法都有相应的开源组件可以直接拿来用：ironwallaby的delaunay组件 以及 Miguel Mota的sobel组件。
这两个算法sobel还好一点，delaunay就有点复杂了，待日后可以研究一下。不过目前只为做出个效果的话，还是可以用这些组件的。
两个最重要的组件都有了，剩下的事就很简单了：
先将图片绘制到canvas上：
然后获取到canvas的imgData，再通过sobel计算返回新的imgData
如果我们把newImgData放到canvas上，就会发现，彩色图片变成了这样的灰度图片：
由于上面说的那个Sobel组件不是很适合自己的用法，同时代码也有不恰当的地方，所以自己做了适当修改和优化，优化了循环方法，加快了运算速度，同时加入了回调函数。详见该项目github中的sobel.js文件
在Sobel方法中对imgData.data进行遍历的时候，会调用回调函数，在回调中把颜色值大于（也就是灰度为rgb(,,)以上的）的坐标点记录下来。然后随机获取一部分边缘点，再加入一些随机出来的坐标 以及 四个边角的坐标值。这样，我们就可以获取到我们需要的坐标点了
获取到坐标点后，就可以通过delaunay组件计算，获取到拍好次序的三角坐标数组，对这些数组里的点进行连线，就可以出现这样的效果：
当然，我们要的效果不是连线，而是对所有三角形进行颜色填充，也就是获取三角形的三个坐标，然后计算出中心点的坐标，再根据中心点坐标在imgData里获取到相应的rgb的颜色值，然后填充到三角区域就可以了：
上面有一点要注意，获取到的中心点坐标一定要取整，才能够获取到正确的颜色参数，如果想着不取整，而是在获取rgb索引的时候再取整，获取到的颜色值就是错的。因为这样获取到的那个像素点就不是我们要的中心像素点。
颜色也获取到后，就是简单的连线，然后填充操作了，最后出来的效果就是：
以上内容给大家介绍了用canvas 实现个图片三角化（LOW POLY）效果 ，希望对大家有所帮助！
ECharts仪表盘实例代码(附源码下载) 大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的
JS实现以内被3或5整除的数字之和 今天在技术群里看到一道这样的提：求以内被3或5整除的数字之和。其中看到很有趣的解法二，最开始还是挺迷惑的，后来想了下，再经人指点，就
多种js图片预加载实现方式分享 图片预加载有大体有几种方式1.html标签或css加载图片显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免
标签: canvas实例
本文链接地址:https://www.jiuchutong.com/biancheng/380380.html 转载请保留说明！下一篇：ECharts仪表盘实例代码(附源码下载)(echarts图表)
