캔버스에 그라디언트 추가

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 및 채우기 (이 코드를 추가는) 이미 원래의 코드

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에서 작업 예제를 게시 한 : 일을 does't 어떤 http://jsfiddle.net/briansexton/e6rC3/