canvas实现浮雕效果

最新推荐文章于 2022-11-22 20:47:00 发布

xiaoli2013a

最新推荐文章于 2022-11-22 20:47:00 发布

阅读量821

点赞数 1

文章标签： h5 canvas 图像处理

本文链接：https://blog.youkuaiyun.com/u011539729/article/details/103162776

版权

本文介绍了如何利用HTML5的canvas元素实现浮雕效果。通过差值运算、中性灰值的添加以及像素的按权平均运算，将图像转换为具有凹面浮雕质感的艺术效果。步骤包括获取像素信息、遍历像素、进行差值运算、按权平均以及将处理后的像素放回画布。此外，还提到凸面浮雕需要在差值运算后进行反相操作。文章提供了一个示例链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是这个美女,长这样
在这里插入图片描述

然后进行一个浮雕操作
在这里插入图片描述

一瞬间,生动活跃的人物就变成了石板雕刻,还带上了一点质感.如何实现这种浮雕质感呢?放在画布里,也就是对像素的操作,关键就在怎么操作了.
先这样:把每个像素的通道和相邻像素的通道值进行差值运算,
再这样:得到结果加上中性灰的值(128),
然后再这样:当前像素把以上运算得到结果进行一次按权的平均运算(就是实现灰度时候的按权整数法),把所得值赋值给各个通道.具体点就是这样

1.获取画布上图像的像素信息

2.遍历每一个像素

3.把相邻像素的同个通道进行差值运算,再加上中性灰的色值

4.把结果通道的值进行求和并按权平均作为最终通道的值

5.把处理后的像素信息放回画布

注意:浮雕分凸面和凹面型,这里实现的是凹面型,凸面型要在3的基础上进行反相操作(取它的补数)

And then…


        function Filter(context){
   
          this.context = context;
        }
        Filter.prototype.constructor = Filter;
        Filter.prototype.relief = function(startX, startY, w, h

最低0.47元/天解锁文章