CSS将渐变转换为画布版本

Question

我有一个渐变需要应用到画布上。

section {
  width: 440px;
  height: 171px;
  background-image: linear-gradient(185deg, #39adb2 0%, rgba(255, 255, 255, 0.24) 100%), linear-gradient(to top, rgba(152, 227, 230, 0.18) 0%, rgba(196, 229, 255, 0) 99%, rgba(196, 229, 255, 0) 100%);
  opacity: 0.48;
}

<section></section>

我需要帮助才能将其转换为画布 API；我不知道该怎么做。也许有一个在线工具？

  var gradientFill = ctx.createLinearGradient(100, 10, 100, 100);
  gradientFill.addColorStop(0, "#39adb2");
  gradientFill.addColorStop(0.99, "rgba(196, 229, 255, 0)");
  gradientFill.addColorStop(1, "rgba(196, 229, 255, 0)");
  gradientFill.addColorStop(0, "#39adb2");
  gradientFill.addColorStop(1, "rgba(152, 227, 230, 0.18)");

Answer 1

快速回答，因为我没有时间解释数学。

角度延伸渐变的长度，因为它必须适合角落。求解一个三角形，它是渐变的对角线中心线。

我已更改渐变以显示它适合黑色开始中心和结束。我相信您可以更改为您需要的渐变。

图像显示变量。找到hypt 的长度，用它找到fromTopRight 并用它找到diag。距中心的距离为len = hypt + diag。一步一步看代码。

requestAnimationFrame(renderLoop);
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
function drawDiagonalGrad(angDeg) {
    var cssAng = angDeg;
    canAng = cssAng - 90;
    var ang = (canAng - 90) * (Math.PI / 180);
    var hypt = cy / Math.cos(ang);
    var fromTopRight = cx - Math.sqrt(hypt * hypt - cy * cy);
    var diag = Math.sin(ang) * fromTopRight;
    var len = hypt + diag;

    var topX = cx + Math.cos(-Math.PI / 2 + ang) * len;
    var topY = cy + Math.sin(-Math.PI / 2 + ang) * len;
    var botX = cx + Math.cos( Math.PI / 2 + ang) * len;
    var botY = cy + Math.sin( Math.PI / 2 + ang) * len;

    var grad = ctx.createLinearGradient(topX,topY,botX,botY);
    grad.addColorStop(0,     'rgb(0,0,0)');
    grad.addColorStop(0.02,  'rgb(255,0,0)');
    grad.addColorStop(0.021, 'rgb(26,130,255)');
    grad.addColorStop(0.49,  'rgb(196,230,255)');
    grad.addColorStop(0.495, 'rgba(255,0,0)');
    grad.addColorStop(0.505, 'rgba(255,0,0)');
    grad.addColorStop(0.51,  'rgb(196,230,255)');
    grad.addColorStop(0.98,  'rgb(52,27,230)');
    grad.addColorStop(0.981, 'rgb(255,0,0)');
    grad.addColorStop(1,     'rgb(0,0,0)');

    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 440,171);
 }
 
 

function renderLoop(time) {
    ctx.clearRect(0, 0, w, h);
    drawDiagonalGrad(Math.sin(time / 1000) * 44 + 45);
    requestAnimationFrame(renderLoop);
}

canvas {
   border : 1px solid black;
}

<canvas id="canvas" width = "440" height = "171"></canvas>

Answer 2

以下是将 CSS 渐变转换为画布版本的方法...

var ctx = document.querySelector('#canvas').getContext('2d');

var grd = ctx.createLinearGradient(0, 0, 0, 171);
grd.addColorStop(0,"#39ADB2");
grd.addColorStop(0,"#98E3E6");
grd.addColorStop(1,"#FFFFFF");

ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="canvas" width="440" height="171"></canvas>

Answer 3

请试试这个。

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var grad = context.createLinearGradient(0,0,0,171);

    grad.addColorStop(0, 'rgba(196,230,255,1)');
    grad.addColorStop(1, 'rgba(255,255,255,1)');

    context.fillStyle = grad;
    context.fillRect(0, 0, 440,171);

<canvas id='canvas' width='440' height='171' ></canvas>