canvas像素级操作实现滤镜之反色滤镜、黑白滤镜

本文介绍了如何利用canvas进行像素级操作,分别实现了反色滤镜和黑白滤镜的效果。反色滤镜通过从255中减去每个像素的RGB分量再赋值,达到反转颜色的效果;而黑白滤镜则计算每个像素RGB的平均值,并将其设置为三个分量的值,从而实现灰度显示。

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


反色滤镜

原理:从255中减去每个像素的红、绿、蓝分量值,再将差值赋值回去实现反转



  1. //反色滤镜  
  2.     function negative_Filter(data) {  
  3.   
  4.         for (var i = 0; i < data.length - 4; i += 4) {  
  5.             data[i] = 255 - data[i];  
  6.             data[i + 1] = 255 - data[i + 1];  
  7.             data[i + 2] = 255 - data[i + 2];  
  8.         }  
  9.         return data;  
  10.     }</span>  


黑白滤镜:

原理:计算出每个像素的红、绿、蓝分量值的平局值,然后将三个分量值都设置为该平均值


  1. //黑白滤镜  
  2.     function BAW_Filter(data) {  
  3.   
  4.         for (var i = 0; i < data.length - 4; i += 4) {  
  5.             var tmp = (data[i] + data[i + 1] + data[i + 2]) / 3;  
  6.   
  7.             data[i] = tmp;  
  8.             data[i + 1] = tmp;  
  9.             data[i + 2] = tmp;  
  10.         }  
  11.         return data;  
  12.     }</span>  



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值