网站创意的技术,网站建设模板ppt,苏州专业网站制作设计,wordpress在哪看代码前言 微信公众号#xff1a;前端不只是切图 轮廓 对内容做border效果#xff0c;可以先看下代码运行的效果 内容是黑线构成的五角星#xff0c;其轮廓就是红线的部分#xff0c;本文主要介绍如何在canvas中实现这种效果 Marching Square 这里运用到的是marching square算法… 前言 微信公众号前端不只是切图 轮廓 对内容做border效果可以先看下代码运行的效果 内容是黑线构成的五角星其轮廓就是红线的部分本文主要介绍如何在canvas中实现这种效果 Marching Square 这里运用到的是marching square算法直译过来就是行进的方格这里的方格相当于canvas上的像素和他的上、左、上左的像素形成的区域贴一张网上找到的图很形象直观的表达了这个算法 找到一个起始点 算法的整体过程为首先我们要找到一个起始点可以通过从左到右从上到下遍历canvas的imageData找到第一个alpha不为0的像素作为起始点然后开始行进 开始行进 所谓行进就是对(x,y)坐标做1或-1操作该如何行进上图给出了16种状态每种状态右下角的点就是当前准备行进的点我们看上图的第一张像素图红框中像素内容是白黑白黑对应第9种状态所以要往下行进则x不变y1变成第二张像素图然后继续判断发现当前状态是白黑白白对应第5种状态向右行进所以x1y不变之后不断往后直到出现第16种状态即全是黑的或者当前行进的像素坐标和起始像素坐标一致就说明边缘提取结束 优化 上面图其实就黑和白两种状态代表是内容是否是完全透明的可以通过二进制的方式优化状态比较的过程比如第一个白白白白对应0000第二个黑黑白白对应1100即当行进点获取四周的状态时可以通过左移的方式得到当前方格的二进制 绘制 我们可以把上面提取的点存到一个数组中通过ctx.move()的方式将路径绘制到canvas上 效果展示时间 为了让效果更加酷炫点简单的用鼠标实现画笔功能并且边框用虚线点击绘制轮廓的同时把原内容隐藏这里贴的是gif加载可能比较慢可能要稍微等一下 本文由 mdnice 多平台发布
