HTML5 Canvas Dairesel Degrade Oluşturma

HTML5 Canvas ile radyal degrade oluşturmak için createRadialGradient() yöntemini kullanabiliriz. Radyal degradeler, iki hayali daire ile tanımlanır – bir de çember ve degradenin başlangıç çemberiyle başlayıp bitiş çemberine doğru hareket ettiği bitiş çemberidir.


context.createRadialGradient(x0,y0,r0,x1,y1,r1);

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

x0 Degradenin başlangıç çemberinin x koordinatı
y0 Degradenin başlangıç çemberinin y koordinatı
r0 Başlangıç çemberinin yarıçapı
x1 Degradenin bitiş çemberinin x koordinatı
y1 Degradenin bitiş çemberinin y koordinatı
r1 Bitiş çemberinin yarıçapı

Çıktı:

Kod:


    <canvas id="canvas" width="578" height="200"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        //dış çerçeve
        ctx.beginPath();
        //arc(x,y,r,sAngle,eAngle,counterclockwise);
        ctx.arc(100, 100, 100, 0, Math.PI * 2, true); // dış çerçeve
        ctx.lineWidth = 5;

        // Gradient oluşturma
        var grd=ctx.createRadialGradient(75, 75, 10, 75, 75, 150);
        grd.addColorStop(0, '#8ED6FF');   //açık mavi
        grd.addColorStop(1, '#004CB3'); //koyu mavi
        ctx.fillStyle=grd;
        ctx.fill();
        ctx.closePath();
    </script>

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

//dış çerçeve

ctx.beginPath();

//arc(x,y,r,sAngle,eAngle,counterclockwise);

ctx.arc(100, 100, 100, 0, Math.PI * 2, true); // dış çerçeve

ctx.lineWidth = 5;

// Gradient oluşturma

var grd=ctx.createRadialGradient(75, 75, 10, 75, 75, 150);

grd.addColorStop(0, '#8ED6FF'); //açık mavi

grd.addColorStop(1, '#004CB3'); //koyu mavi

ctx.fillStyle=grd;

ctx.fill();

ctx.closePath();

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Dairesel Degrade Oluşturma

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap