位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享用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上,就会发现,彩色图片变成了这样的灰度图片:

用canvas 实现个图片三角化(LOW POLY)效果(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 转载请保留说明!

上一篇:Js实现简单的小球运动特效(js最简单的代码)

下一篇:ECharts仪表盘实例代码(附源码下载)(echarts图表)

  • 费改税是哪一年
  • 个人独资企业出资额是注册资本吗
  • 分公司产生的费用怎么报销
  • 增值税普票可以开给个人吗
  • 农产品一般纳税人开普票免税吗
  • 企业所得税必须计提吗?什么时候计提?
  • 增值税专用发票和普通发票的区别
  • 年度汇算清缴需要注意的项目
  • 电子发票报销怎么用
  • 货到票未到怎么入账
  • 其他人挂靠公司交社保会计处理怎么做?
  • 生产出来的次品怎么入账
  • 往来核算在会计哪个科目
  • 挂靠被查出来后挂靠费怎么处理?
  • 单位发生的业务怎么做账
  • 建筑业增值税普通发票可以抵扣吗
  • 税友软件费用
  • 股票期权个人所得税税率表
  • 个人所得税特殊计税方法
  • 发票作废时间有多长
  • 进项税额转出后再转入怎么做账
  • 年末结转本年利润后再结账吗
  • 计算消费税要价税分离吗
  • 注销税务登记后多久注销工商登记
  • 劳务服务公司可以承包大型工程吗?
  • spss安装后无法启动许可证授权向导
  • biospwds最新版
  • win7系统的系统配置里设置开机启动项
  • 软件 摊销
  • 外购固定资产对账怎么算
  • Win11怎么设置开机跳过密码
  • 电脑数据恢复怎么用
  • rpcclient.exe - rpcclient是什么进程 有什么用
  • 买车的收费项目详细清单
  • 民办学校的财务制度
  • 股票发行费用怎么处理
  • 财务费用利息收入怎么结转
  • 建筑企业安装费计入什么科目
  • 支付报刊杂志费
  • 临时用工账务处理流程
  • php文件包含目录文件吗
  • 红字专用发票开具的规定
  • PHP基于国秘s2m加解密的处理方式
  • php写一个简单的单例模式
  • php返回数据给ajax
  • transform模块
  • java前端开发是做什么的
  • 企业所得税实施条例第七条
  • 待摊费用的明细
  • 增值税专票只有右上角有发票号码
  • 一个月可以勾选多少进项税额
  • 工资的补贴是多少
  • 库存材料清查结论怎么写
  • windows PostgreSQL 9.1 安装详细步骤
  • 个税租房租金扣除规则
  • 城建税要计入税金及附加吗
  • 清包工方式建筑服务
  • 申请高新技术企业要具备哪些条件
  • 企业当年实现的利润属于哪类会计科目
  • sql server 2012安装无网络可以OK?
  • 删除mysql57服务
  • 短期借款的其它账户
  • 税控服务费属于增值税减免费?
  • 主营业务成本和营业成本的区别
  • 残疾人就业保证金上年工资总额是说上一年度么
  • 差旅费住宿专票能否抵扣
  • 一般纳税人哪些项目可以简易征收
  • 微软推送windows 11
  • 怎么关闭win10升级
  • unix2dos linux实现
  • win10不支持win7软件怎么办
  • Node.js中的事件循环是什么意思
  • JQuery Ajax WebService传递参数的简单实例
  • unity射击游戏完整案例
  • idea 分析源码
  • javascript总结笔记
  • javascript基于什么的语言
  • 税务局把我拉入黑名单了怎么办
  • 武汉税务电话号码
  • 江西省税务局官网查询系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设