跳到主要内容

createLinearGradient

2023年08月12日
柏拉文
越努力，越幸运

一、认识​

ctx.createLinearGradient() 方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient 对象。想要应用这个渐变，需要把这个返回值赋值给 fillStyle 或者 strokeStyle。

二、语法​

const canvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);

  • x0: 起点的 x 轴坐标。

  • y0: 起点的 y 轴坐标。

  • x1: 终点的 x 轴坐标。

  • y1: 终点的 y 轴坐标。

  • canvasGradient: 一个根据指定线路初始化的线性 CanvasGradient 对象。

三、场景​

3.1 渐变填充矩形​

<canvas id="canvas"></canvas>

<script>
    const canvas = document.querySelector('#canvas');
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    const gradient = ctx.createLinearGradient(20, 0, 220, 0);
    gradient.addColorStop(0, 'green');
    gradient.addColorStop(0.5, 'cyan');
    gradient.addColorStop(1, 'green');

    ctx.fillStyle = gradient;
    ctx.fillRect(20, 20, 200, 100);
</script>