html - 带渐变的动画画布线

Question

一位朋友问我是否可以将动画 gif 更改为画布 - 他说在手机上通过 3G 观看时 gif 被压缩，导致渐变变得“线条”。

这是目标http://patgaunt.co.uk/logo.gif

这是我到目前为止的地方http://patgaunt.co.uk/logo.html

如您所见，我的形状非常正确，但是渐变需要跟随线条而不是画布上的一般渐变。它还需要一些不透明度，以便它在顶部循环，可以看到重叠。最后，该行需要像示例中一样进行动画处理，但我还是不知道该怎么做。

任何帮助深表感谢。

Answer 1

由于它具有 3 个透明度级别，因此您至少需要描边 3 次。我们像这样使渐变透明：tGrad.addColorStop(0, "transparent");.

很抱歉让你这样离开，但我已经为你的项目制作了一个结构。它应该可以帮助您实现目标。这是我的结构的样子：http: //jsfiddle.net/sadaf2605/JzbG2/

助手代码：

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