Canvas 径向渐变来匹配 css 径向渐变

Question

我创建了两个径向渐变，我希望它们非常相似：一个使用画布操作，一个使用 css 线性渐变。然而，它们最终看起来非常不同。有没有办法让画布渐变与CSS渐变相匹配，或者这只是一个难以解决的实现差异？

const canvas = document.getElementById('bar');
const context = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;

const gradient = context.createRadialGradient(250, 250, 0, 250, 250, 250);

// Add the color stops
gradient.addColorStop(0, 'rgba(246,238,25,1)');
gradient.addColorStop(1, 'rgba(17,94,222,0.3)');

// Set the fill style and draw a rectangle
context.fillStyle = gradient;
context.fillRect(0, 0, 500, 500);

#foo {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(246, 238, 25, 1) 0, rgba(17, 94, 222, 0.3) 100%);
}

<div id="foo">
</div>
<canvas id="bar"></canvas>

Answer 1

试试这个套餐

npm i gradient-parser