CODEWITHSUNDEEP
htmlhtml5-canvas
patg
patg

Reputation: 277

Animated canvas line with gradient

I have been asked by a friend to see if I can change an animated gif to canvas - he says the gif is being compressed when viewed over 3G on mobiles causing the gradient to go 'liney'.

This is the target http://patgaunt.co.uk/logo.gif

This is where I've got so far http://patgaunt.co.uk/logo.html

As you can see I have the shape pretty much right however the gradient needs to follow the line rather than be a general gradient across the canvas. Also it needs some opacity so as it loops over the top it can be seen overlapping. Finally the line needs to be animated as in the example but again I don't know how to do this.

Any help is much appreciated.

Upvotes: 0

Views: 413

Answers (1)

sadaf2605
sadaf2605

Reputation: 7540

Since it has 3 transparency level you will need to stroke at least 3 times. We make a gradient transparent like this: tGrad.addColorStop(0, "transparent");.

Sorry for leaving you like that but I have made a structure for your project. It should help you to reach your goal. Here is what my structure look like: http://jsfiddle.net/sadaf2605/JzbG2/

Helper Code:

        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var context2 = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;

//gradient for circle
        var grad = context.createLinearGradient(50, 50, 150, 150);
        grad.addColorStop(0, "#315164");
        grad.addColorStop(1, "#55a1ce");
        context.strokeStyle = grad;
        context.lineCap = "round";

//drawing circle
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.lineWidth = 22;
        context.stroke();
//circle ends

//gradient for straight line1
        context.beginPath();
        var t1Grad=context.createLinearGradient(50, 50, 150, 150);
        t1Grad.addColorStop(0.3, "transparent");
        t1Grad.addColorStop(1, "#55a1ce");
         context.strokeStyle=t1Grad;

//drawing straight line1
        context.moveTo(170, 35);
        context.lineTo(170, 50);
        context.stroke();

 //gradient for straight line1
        context.beginPath();
        var t2Grad=context.createLinearGradient(50, 50, 150, 150);
        t2Grad.addColorStop(0.3, "transparent");
        t2Grad.addColorStop(1, "#55a1ce");
         context.strokeStyle=t2Grad;

//drawing straight line1
        context.moveTo(170, 35);
        context.lineTo(170, 165);
        context.stroke();

Upvotes: 1

Related Questions