html一个矩形两种颜色渐变,带有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元素是否可行.