Question

我需要在画布上添加渐变。我已经测试了所有解决方案，但没有任何效果。

原始代码：

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();

我为gradiant添加了此代码，fill（）已经发送到原始代码

var grd = ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000);

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

// Fill with gradient
ctx.fillStyle = grd;
ctx.fill();

genHex()是：

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

任何指导都会有所帮助。

Answer 1

您是否在上下文中绘制了一个矩形？尝试这样的事情：

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发布了一个工作示例：http://jsfiddle.net/briansexton/e6rC3/

向画布添加渐变

1 个答案: