画布绘制带有线性渐变的填充圆角矩形
我在绘制线性渐变填充矩形时遇到问题。两张截图分别来自 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();
感谢您的帮助！
I've got a problem with drawing linear gradient filled rect. The two screenshots are from chrome (left) and Firefox (right). As you can see, the gradient is only applied to the rect on the first 170px (you could see it better on the right image, because firefox fills up the rest with the colorStop you've added at last). The following code does fill the rect with 200px of gradient height, and I don't know why only 170px are filled up. Height = 200, left = 30, top = 30, Width = 300, radius = 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();
Thanks for help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是渐变高度不是相对于渐变的 y1-Startpoint 计算的，而是根据 canvas 元素的 y0-Startpoint 计算的。将 y2 的代码更改为 y2 + y1（端点现在是相对于起点计算的），解决了问题。
The problem is that the gradients height is not calculated relative to the y1-Startpoint of the gradient, its calculated from y0-Startpoint of the canvas element. Changing the code for y2 to y2 + y1 (endpoint is now calculated relative to startpoint), fixed the problem.