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

Question

我有画线性渐变填充矩形的问题。这两个屏幕截图来自chrome（左）和Firefox（右）。正如你所看到的，渐变只应用于第一个170px的矩形（你可以在右边的图像上看到它更好，因为firefox用最后添加的colorStop填充了其余部分）。下面的代码用200px的渐变高度填充矩形，我不知道为什么只填充了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);