Javascript 向画布添加渐变

我需要在画布上添加渐变。我已经测试了所有的解决方案，但都不起作用

原始代码：

ctx.strokeStyle = params.wheelBorderColor;
ctx.lineWidth = params.wheelBorderWidth;
ctx.font = params.wheelTextFont;
ctx.clearRect(0, 0, 500, 500);

var text = null,
    i = 0,
    totalJoiner = pplLength;
var width = ctx.measureText(text).width + blur * 2;

for (i = 0; i < totalJoiner; i++) {
    text = pplArray[i];
    var angle = startAngle + i * arc;
    ctx.fillStyle = colorCache.length > totalJoiner ? colorCache[i] : genHex(text);

    ctx.beginPath();
    // ** arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
    ctx.arc(250, 250, params.outterRadius, angle, angle + arc, false);
    ctx.arc(250, 250, params.innerRadius, angle + arc, angle, true);
    ctx.stroke();
    ctx.fill();

    ctx.save();


    ctx.fillStyle = params.wheelTextColor;
    ctx.translate(250 + Math.cos(angle + arc / 2) * params.textRadius, 250 + Math.sin(angle + arc / 2) * params.textRadius);
    ctx.rotate(angle + arc / 2 + Math.PI / 1);

    ctx.fillText(text, -ctx.measureText(text).width / 2, 6);
    ctx.restore();
    ctx.closePath();
}

drawArrow();

genHex（）

是：

color = "#666"; colorCache.push('#'+color); return '#'+color;"

---

任何指导都会有帮助。

您是否在上下文中绘制矩形？试着这样做：

var canvas = document.getElementById('test-canvas');
var ctx = (canvas !== null ? canvas.getContext('2d') : null);
var grd = (ctx !== null ? ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000) : null);

if (grd) {

    ctx.rect(0, 0, canvas.width, canvas.height);

    grd.addColorStop(0.000, 'rgba(0, 0, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 255, 255, 1.000)');

    ctx.fillStyle = grd;

    ctx.fill();
}

---

我在JSFiddle上发布了一个工作示例：

什么不起作用？你能提供一个提琴吗？画布是工作，但不是梯度我有编辑后查看我的原始代码和添加代码请在这个网站上提供一个提琴：

var canvas = document.getElementById('test-canvas');
var ctx = (canvas !== null ? canvas.getContext('2d') : null);
var grd = (ctx !== null ? ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000) : null);

if (grd) {

    ctx.rect(0, 0, canvas.width, canvas.height);

    grd.addColorStop(0.000, 'rgba(0, 0, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 255, 255, 1.000)');

    ctx.fillStyle = grd;

    ctx.fill();
}