HTML+CSS+JS带你轻松掌握图片滤镜，让你的网页设计更有风格！

前端

2023-12-16 06:03:21

探索图片滤镜的魅力：利用 JavaScript 实现从亮到暗的渐变效果

在网页设计的世界中，图片滤镜是一项神奇的工具，它可以让你的图像焕然一新，为用户带来全新的视觉体验。滤镜可以模糊、调整亮度、改变颜色，为你的作品增添艺术气息，提升网站的整体美感和吸引力。

HTML、CSS 和 JavaScript：图片滤镜背后的基石

要掌握 JavaScript 中的图片滤镜，你需要熟悉 HTML、CSS 和 JavaScript 这三者之间的密切关系。

HTML：网页的骨架

HTML（超文本标记语言）是构建网页的基础，它定义了网页的结构，包括标题、段落、列表和图像。HTML 为你的网页提供了骨架，让内容得以呈现。

CSS：网页的时尚顾问

CSS（层叠样式表）为你的网页增添了风格，让你可以控制字体、颜色、背景等元素的外观。CSS 是网页的时尚顾问，让你的设计更具吸引力和视觉冲击力。

JavaScript：网页的互动引擎

JavaScript 是一种脚本语言，它让你的网页动起来。它可以实现各种交互功能，如表单验证、动画效果和图片滤镜。JavaScript 是网页的互动引擎，让用户与你的网站进行交流。

JavaScript 图片滤镜：打造渐变效果

现在，让我们探索如何使用 JavaScript 为图像添加从亮到暗的渐变滤镜。

代码示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <canvas id="myCanvas" width="500" height="300"></canvas>

  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // 加载图片
    var image = new Image();
    image.onload = function() {
      // 将图片绘制到画布上
      ctx.drawImage(image, 0, 0);

      // 创建一个线性渐变
      var gradient = ctx.createLinearGradient(0, 0, 500, 300);
      gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
      gradient.addColorStop(1, "rgba(0, 0, 0, 0)");

      // 使用渐变填充画布
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 500, 300);
    };

    image.src = "image.jpg";
  </script>
</body>
</html>