具有漸變效果的動畫畫布線

我的一位朋友問我是否可以將動畫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

具有漸變效果的動畫畫布線

回答

相關問題