画布绘制填充圆角矩形与线性渐变

Question

我在绘制线性渐变填充矩形方面遇到了问题。这两个截图来自chrome（左）和Firefox（右）。正如您所看到的，渐变仅应用于第一个170px上的矩形（您可以在右侧图像上看到它更好，因为firefox使用您最后添加的colorStop填充其余部分）。下面的代码确实用200px的渐变高度填充了rect，我不知道为什么只填充了170px。高度= 200，左= 30，顶部= 30，宽度= 300，半径= 3;

//Fill
var lingrad = gcx.createLinearGradient(0, top, 0, Height);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(0.5, 'red');
lingrad.addColorStop(1, 'white');
lingrad.addColorStop(1, 'blue');
gcx.fillStyle = lingrad;
gcx.beginPath();
gcx.lineWidth = 1;
gcx.moveTo(left + radius, top);
gcx.lineTo(left + Width - radius, top);
//Top-right-corner:
gcx.arc(left + Width - radius, top + radius, radius, (Math.PI / 180) * 270, (Math.PI / 180) * 0, false);
gcx.lineTo(left + Width, top + Height - radius);
//Bottom-right-corner:
gcx.arc(left + Width - radius, top + Height - radius, radius, (Math.PI / 180) * 0, (Math.PI / 180) * 90, false);
gcx.lineTo(left + radius, top + Height);
//Bottom-left-corner:
gcx.arc(left + radius, top + Height - radius, radius, (Math.PI / 180) * 90, (Math.PI / 180) * 180, false);
gcx.lineTo(left, top + radius);
//Top-left-corner:
gcx.arc(left + radius, top + radius, radius, (Math.PI / 180) * 180, (Math.PI / 180) * 270, false);
gcx.closePath();
gcx.fill();

感谢您的帮助！

Answer 1

问题是渐变高度不是相对于渐变的y1-Startpoint计算的，它是从canvas元素的y0-Startpoint计算出来的。将y2的代码更改为y2 + y1（现在相对于起点计算端点），修复了问题。

var lingrad = gcx.createLinearGradient(x1, y1, x2, y2 + y1);