Question

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

这是目标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();

带渐变的动画画布线

1 个答案: