具有渐变效果的动画画布线

我的一位朋友问我是否可以将动画GIF更改为画布 - 他说GIF在移动设备上通过3G观看时被压缩，导致渐变变得“线条不清”。具有渐变效果的动画画布线

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

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

得到正如你可以看到我有形状非常正确的，不过梯度需要遵循的路线，而不是成为一个画布上的一般渐变。它也需要一些不透明度，因为它可以看到重叠的顶部。最后，该行需要像示例中那样生成动画，但我不知道如何执行此操作。

任何帮助，非常感谢。

来源

2013-03-05 patg

由于它具有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();

来源

2013-03-05 21:58:47 sadaf2605

具有渐变效果的动画画布线

回答

相关问题