Search code examples
javascripthtmlcanvasgradientangle

Angle gradient in canvas


I'm looking for a code that permits to have this effect on a canvas' stroke. I've already got an animated circular stroke, I only need to get the ANGLE gradient, not linear and not radial. I've got only 3 colours. The existing one is available here (the review rating)


Solution

  • A context strokeStyle can be a gradient:

    // create a gradient
    
    gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
    gradient.addColorStop(0.0,"blue");
    gradient.addColorStop(1.0,"purple");
    
    
    // stroke using that gradient
    
    ctx.strokeStyle = gradient;
    

    Example code and a Demo using a gradient strokeStyle: http://jsfiddle.net/m1erickson/w46ps/

    enter image description here

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <style>
        body{ background-color: ivory; }
        #canvas{border:1px solid red;}
    </style>
    <script>
    $(function(){
    
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
    
        function drawMultiRadiantCircle(xc, yc, r, radientColors) {
            var partLength = (2 * Math.PI) / radientColors.length;
            var start = 0;
            var gradient = null;
            var startColor = null,
                endColor = null;
    
            for (var i = 0; i < radientColors.length; i++) {
                startColor = radientColors[i];
                endColor = radientColors[(i + 1) % radientColors.length];
    
                // x start / end of the next arc to draw
                var xStart = xc + Math.cos(start) * r;
                var xEnd = xc + Math.cos(start + partLength) * r;
                // y start / end of the next arc to draw
                var yStart = yc + Math.sin(start) * r;
                var yEnd = yc + Math.sin(start + partLength) * r;
    
                ctx.beginPath();
    
                gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
                gradient.addColorStop(0, startColor);
                gradient.addColorStop(1.0, endColor);
    
                ctx.strokeStyle = gradient;
                ctx.arc(xc, yc, r, start, start + partLength);
                ctx.lineWidth = 30;
                ctx.stroke();
                ctx.closePath();
    
                start += partLength;
            }
        }
    
        var someColors = [];
        someColors.push('#0F0');
        someColors.push('#0FF');
        someColors.push('#F00');
        someColors.push('#FF0');
        someColors.push('#F0F');
    
        drawMultiRadiantCircle(150, 150, 120, someColors);
    
    }); // end $(function(){});
    </script>
    </head>
    <body>
        <canvas id="canvas" width=300 height=300></canvas>
    </body>
    </html>