HTML5 Canvas Pattern Kullanımı

HTML5 Canvas ile desen oluşturmak için, pattern nesnesini döndüren canvas içeriğinin createPattern() yöntemini kullanabilir, fillStyle özelliğini pattern nesnesine ayarlayabilir ve sonra fill() öğesini kullanarak şekli doldurabiliriz. CreatePattern() yöntemi, bir görüntü nesnesi ve yinelenebilir, yinelenen-x, yinelenen-y veya yinelenmeyen olabilen bir yineleme seçeneği gerektirir. Aksi belirtilmedikçe, tekrarlama seçeneği tekrarlamak için varsayılan olarak ayarlanmıştır.

Çıktı:

Kod:


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

        // doku oluşturma
        var resim = new Image();
        resim.src = 'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/pattern.jpg';
        resim.onload = function() {
            ctx.beginPath();
            //arc(x,y,r,sAngle,eAngle,counterclockwise);
            ctx.arc(100, 100, 100, 0, Math.PI * 2, true);
            ctx.lineWidth = 5;
            var pattern = ctx.createPattern(resim, 'repeat');
            ctx.fillStyle = pattern;
            ctx.fill();
            ctx.closePath();
        };
    </script>

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

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

// doku oluşturma

var resim = new Image();

resim.src = 'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/pattern.jpg';

resim.onload = function() {

ctx.beginPath();

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

ctx.arc(100, 100, 100, 0, Math.PI * 2, true);

ctx.lineWidth = 5;

var pattern = ctx.createPattern(resim, 'repeat');

ctx.fillStyle = pattern;

ctx.fill();

ctx.closePath();

};

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Pattern Kullanımı

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap