html5 渐变色矩形,使用HTML5画布元素的矩形渐变

如何使用HTML5画布元素绘制具有如下图所示渐变效果的矩形？使用HTML5画布元素的矩形渐变

编辑：感谢所有的反馈。是的，我已经尝试了很多方法。例如，我可以使用@Loktar建议的createRadialGradient方法吗？下面是一些示例代码：

test

function draw() {

var canvas = document.getElementById("canvas"),

ctx = canvas.getContext("2d");

var grad1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 50);

grad1.addColorStop(0, 'rgba(255, 252, 0, 1)');

grad1.addColorStop(1, 'rgba(68, 205, 37, 1)');

ctx.fillStyle = grad1;

ctx.fillRect(0, 0, 100, 100);

}

但结果不是很我想要的：

这应该是由GDI +提供像PathGradientBrush的方法很容易做到。 我不确定是否可以使用HTML5 canvas元素。

+2

你到目前为止尝试过什么？附： https://developer.mozilla.org/en/Canvas_tutorial%3aApplying_styles_and_colors 5分钟，你就能做到！ –

+1

heh idk约5分钟。继承人我可怕的企图，甚至不会将它作为回答http://jsfiddle.net/loktar/MAjPQ/1/ –

+0

obv'5分钟'意味着它很容易阅读该文档，并尝试轻松获得解决方案:) –