用canvas 实现个图片三角化（LOW POLY）效果

之前看到Ovilia用threejs制作的LOW POLY效果让我眼前一亮，那是一种将图片转化为平面三角化的艺术风格。由于我对threejs不太熟悉，所以我选择使用canvas的2d绘图API来尝试实现这一效果。

我们需要对图片进行三角化处理和边缘检测。对于三角化，我采用了delaunay三角化算法，而对于边缘检测，则使用了sobel边缘检测算法。这两个算法都有相应的开源组件可供使用，分别是ironwallaby的delaunay组件和Miguel Mota的sobel组件。

接下来，我们首先在canvas上绘制图片。我会根据图片的原始尺寸和canvas的尺寸进行比较，然后设定canvas的宽高，并将图片绘制到canvas上。

然后，我们通过ctx的getImageData方法获取到canvas的图像数据，再通过sobel算法计算得到新的图像数据。如果我们直接将新的图像数据显示在canvas上，会发现原本彩色的图片变成了灰度图片。

由于之前使用的Sobel组件不太符合我的使用需求，因此我对其进行了适当的修改和优化。我优化了循环方法，提高了运算速度，并加入了回调函数。具体的优化和调整细节可以在项目github中的sobel.js文件中看到。

在Sobel方法的回调中，我会记录颜色值大于某个阈值（比如40）的坐标点，这些点就是图片的边缘点。然后我会随机选择一部分边缘点，再加上一些随机坐标和四个边角的坐标值，这些就是我要进行三角化的点集。

Canvas：实现图片的三角化（LOW POLY）效果

在数字艺术的海洋中，有一种独特的效果引人注目——三角化（LOW POLY）效果。这种效果以其简洁的线条和丰富的色彩为特点，给人一种原始而现代的美感。本文将带你了解如何使用Canvas实现这一效果。

我们需要获取图像的数据。通过Canvas的API，我们可以获取到整个canvas的图像数据。在这个过程中，我们主要关注那些色值较高的边缘像素点，并收集它们。我们还会添加一些随机点作为补充。

获取到这些坐标点后，下一步就是通过Delaunay三角化来计算。这个过程会产生一系列的三角形坐标。我们的目标是对这些三角形进行颜色填充。

对于每个三角形，我们首先获取其三个顶点的坐标，然后计算出中心点的坐标。这个中心点的坐标将用于从imgData中获取相应的颜色值。这里需要注意的是，中心坐标必须取整，以确保获取到的颜色参数准确无误。

获取到颜色后，就可以进行连线并填充了。这个过程相对简单，首先使用Canvas的API绘制三角形的轮廓，然后设置填充样式并填充。

值得注意的是，在获取颜色值时，我们使用的是三角形的中心坐标。这是因为我们想要填充的颜色是三角形的“中心颜色”，而不是顶点的颜色。通过这种方式，我们可以确保每个三角形都有一个与其背景相协调的颜色。

通过以上步骤，我们就可以在Canvas上实现图片的三角化（LOW POLY）效果。这种效果不仅具有独特的视觉美感，还可以用于创建各种有趣的交互和动画。

使用Canvas实现图片的三角化效果是一项有趣且具有挑战性的任务。通过深入理解并应用相关技术，我们可以创造出令人惊叹的数字艺术作品。希望你能对Canvas的使用有更深入的了解，并能在实践中创造出更多的可能性。

结尾提醒一下，以上代码需要在适当的编程环境中运行，以确保其正常运行并达到预期的效果。希望这篇文章对你有所帮助！如果你有任何问题或想法，欢迎与我交流。让我们一起数字艺术的无限可能！

通过Cambrian的渲染方法将内容展示在网页上，完成整个效果的展示。希望这种三角化效果能给浏览者带来独特的视觉体验。