그라데이션이 적용된 캔버스 라인

Question

캔버스에 애니메이션 GIF를 바꿀 수 있는지 친구에게 묻습니다. GIF가 휴대폰에서 3G를 통해 볼 때 압축되어 '그라디언트'가되도록합니다.

이

는 지금까지 http://patgaunt.co.uk/logo.html

있어 어디 내가 꽤 많이 그라데이션 선을 따라 할 필요가 우측 그러나 모양을 볼보다는 수 있듯이 이것은 대상 http://patgaunt.co.uk/logo.gif

입니다 캔버스의 일반적인 그래디언트 또한 일부 불투명도가 필요하므로 겹쳐서 볼 수있는 위쪽으로 반복됩니다. 마지막으로이 예제에서와 같이 라인을 애니메이션화해야하지만 다시이 작업을 수행하는 방법을 모릅니다.

도움을 주시면 감사하겠습니다.

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