是否可以在CSS(双线性渐变)中创建2轴4色渐变? [英] Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?

问题描述

我的JavaScript和<canvas>实例. https://codepen.io/KonradLinkowski/pen/QWbjaPr

My exmaple in JavaScript and <canvas>. https://codepen.io/KonradLinkowski/pen/QWbjaPr

const canvas = document.querySelector('#box')
const ctx = canvas.getContext('2d')

const interpolate = (value, start, end) => (end - start) * value + start

const interpolateRGB = (value, start, end) => {
  return {
    r: interpolate(value, start.r, end.r),
    g: interpolate(value, start.g, end.g),
    b: interpolate(value, start.b, end.b)
   }
}

const calcColor = (point, topLeft, topRight, bottomLeft, bottomRight) => {
  const top = interpolateRGB(point.x, topLeft, topRight)
  const bottom = interpolateRGB(point.x, bottomLeft, bottomRight)
  const result = interpolateRGB(point.y, top, bottom)
  return result
}

const drawCanvas = () => {
  const imageData = ctx.createImageData(canvas.width, canvas.height)
  for (let y = 0; y < canvas.height; y += 1) {
    for (let x = 0; x < canvas.width; x += 1) {
      const colors = [
        { r: 238, g: 252, b: 83 },
        { r: 120, g: 239, b: 197 },
        { r: 253, g: 67, b: 205 },
        { r: 74, g: 68, b: 215 }
      ]
      const color = calcColor({ x: x / (canvas.width - 1), y: y / (canvas.height- 1) }, ...colors)
      imageData.data[(y * canvas.width + x) * 4] = color.r
      imageData.data[(y * canvas.width + x) * 4 + 1] = color.g
      imageData.data[(y * canvas.width + x) * 4 + 2] = color.b
      imageData.data[(y * canvas.width + x) * 4 + 3] = 255
    }
  }
  ctx.putImageData(imageData, 0, 0)
}

const resizeCanvas = (width, height) => {
  canvas.width = width
  canvas.height = height
  drawCanvas();
}

resizeCanvas(window.innerWidth, window.innerHeight);

window.addEventListener('resize', () => resizeCanvas(window.innerWidth, window.innerHeight))
  

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#box {
  border: 1px solid black;
}

<canvas id="box" width="300" height="300" class="grdnt"></canvas>

推荐答案

mask与linear-gradient结合可以做到:

.box {
  height: 200px;
  width: 300px;
  background: linear-gradient(to right, rgb(238, 252, 83), rgb(120, 239, 197))
}
.box::before {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(to right, rgb(253, 67, 205), rgb(74, 68, 215));
  -webkit-mask: linear-gradient(to bottom,transparent, #fff);
          mask: linear-gradient(to bottom,transparent, #fff);
}

<div class="box"></div>

另一种颜色:

.box {
  height: 200px;
  width: 300px;
  background: linear-gradient(to top right, rgb(238, 252, 83), rgb(120, 239, 197))
}
.box::before {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(to top right, rgb(253, 67, 205), rgb(74, 68, 215));
  -webkit-mask: linear-gradient(to bottom right,transparent, #fff);
          mask: linear-gradient(to bottom right,transparent, #fff);
}

<div class="box"></div>

这篇关于是否可以在CSS(双线性渐变)中创建2轴4色渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！