HTML5canvas给图片加滤镜

最新推荐文章于 2025-04-03 11:21:46 发布

卢噜噜噜噜

最新推荐文章于 2025-04-03 11:21:46 发布

阅读量1.9k

点赞数

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/qq_37304197/article/details/83090184

版权

这篇博客介绍了如何使用HTML5的canvas元素为图片应用滤镜效果，包括颜色反转、黑白效果、亮度调节和蒙版操作。颜色反转是通过取像素颜色值的补数实现，黑白效果则是将像素三原色取平均值。文章还探讨了通过加权平均值调整黑白程度以及调节图片亮暗的方法。最后提到了利用蒙版技术来改变图片部分区域的显示效果。

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

图片颜色反转
图片颜色反转的终极奥义就是，每个像素的颜色值取反，即data[i + 0] = 255 - data[i + 0];

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
    
            return document.getElementById(id);
        }
        window.onload = function () {
    
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var image = new Image();
            image.src