HTML5 Canvas ile doğrusal bir degrade oluşturmak için createLinearGradient() yöntemini kullanabiliriz. Doğrusal degradeler, degradenin yönünü tanımlayan hayali bir çizgi ile tanımlanır. Degrademizi oluşturduktan sonra, addColorStop özelliğini kullanarak renkler ekleyebiliriz.
Doğrusal degradenin yönü, başlangıç noktasından createLinearGradient() ile tanımlanan hayali satırın bitiş noktasına gider. Bu derste iki renk durağı kullandık: degradenin başlangıç noktasında çıkan açık mavi ve bitiş noktasıyla biten koyu mavi. Renk durakları, hayali çizgi boyunca 0 ile 1 arasında bir yere yerleştirilir; burada 0, başlangıç noktasında ve 1, bitiş noktasındadır.
Çıktı:
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Canvas Örneği</title> </head> <body> <canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.rect(0, 0, canvas.width, canvas.height); // gradient ekle var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height); // açık mavi grd.addColorStop(0, '#8ED6FF'); // koyu mavi grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill(); </script> </body> </html> |
Çıktı 2:
Kod 2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //dış çerçeve ctx.beginPath(); //arc(x,y,r,sAngle,eAngle,counterclockwise); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // dış çerçeve ctx.lineWidth = 5; // Gradient oluşturma var grd=ctx.createLinearGradient(50, 0, 100, 0); grd.addColorStop(0, '#8ED6FF'); //açık mavi grd.addColorStop(1, '#004CB3'); //koyu mavi ctx.fillStyle=grd; ctx.fill(); ctx.closePath(); </script> |
Yorum Yap