我正在尝试使用 Javascipt/HTML Canvas 制作径向渐变。问题是渐变没有正确重叠,就好像 alpha channel 不工作一样。
这是我使用的代码:
var gradient1 = ctx.createRadialGradient(300, 300, 300, 300, 300, 0);
gradient1.addColorStop(0,"rgba(0, 0, 0, 0)");
gradient1.addColorStop(1,"#FF0000");
ctx.fillStyle = gradient1;
ctx.fillRect(x1, y1, 600, 600);
ctx.fillRect(x1, y1, 600, 600);
这是一张图片:
由于某种原因,这会褪色成类似黑色的颜色,而不是保持红色。当这些不同颜色的渐变中的两个相互接触时,这会导致它表现得很奇怪。
我怎样才能让它正常 react ?
最佳答案
原因
定义的渐变是红黑色,颜色和 alpha channel 都将被插值。在 50% 时,它将介于红色和黑色之间,但也有 50% 可见,这就是它变得偏黑的原因。
治愈
要修复,请确保两个色标的颜色相同,只是 alpha channel 发生了变化。这将使颜色始终保持相同:
gradient1.addColorStop(0, "rgba(255, 0, 0, 0)"); // red, but transparent
gradient1.addColorStop(0, "#f00"); // red, solid
点击下面的链接查看实际效果:
var ctx = document.querySelector("canvas").getContext("2d");
var gradient1 = ctx.createRadialGradient(300, 300, 300, 300, 300, 0);
gradient1.addColorStop(0,"rgba(255, 0, 0, 0)");
gradient1.addColorStop(1,"#FF0000");
ctx.fillStyle = gradient1;
ctx.fillRect(0, 0, 600, 600);
ctx.fillRect(0, 0, 600, 600);
<canvas width=600 height=600></canvas>
关于javascript - Canvas 中的径向渐变不会正确淡化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30228940/