📌  相关文章
📜  HTML |画布 createLinearGradient() 方法(1)

📅  最后修改于: 2023-12-03 15:15:39.989000             🧑  作者: Mango

HTML | 画布 createLinearGradient() 方法

概述

HTML5 中的 Canvas 元素允许您在网页上绘制二维图像。createLinearGradient() 是 Canvas 对象的一个内置方法。

该方法用于在 Canvas 上创建一个线性渐变对象。使用该对象可以绘制渐变颜色的形状。

语法

创建线性渐变对象的语法如下：

context.createLinearGradient(x0, y0, x1, y1);

参数说明：

  • x0: 渐变开始点的 x 坐标
  • y0: 渐变开始点的 y 坐标
  • x1: 渐变结束点的 x 坐标
  • y1: 渐变结束点的 y 坐标
示例

以下示例演示如何在 Canvas 上创建一个红色到蓝色的线性渐变对象：

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas"></canvas>

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

        // 创建渐变
        var gradient = ctx.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop(0, "red");
        gradient.addColorStop(1, "blue");

        // 绘制渐变矩形
        ctx.fillStyle = gradient;
        ctx.fillRect(10, 10, 150, 80);
    </script>
</body>
</html>

上述代码使用 <canvas> 元素在网页上创建一个 Canvas 元素，然后使用 createLinearGradient() 方法创建一个线性渐变对象 gradient。我们添加了两种颜色（红色和蓝色），第一个参数指定渐变的起始点（0，0），第二个参数指定渐变的结束点（200，0）。

接下来通过 fillStyle 属性将渐变颜色设置为背景颜色，使用 fillRect() 方法在 Canvas 上绘制一个填充矩形。

参考链接