HTML5 Canvas Transform Kullanımı

HTML5 Canvas’a özel bir dönüştürme matrisi uygulamak için transform() yöntemini kullanabiliriz. Bu yöntem aşağıdaki kurala göre 3 x 3 matrisin altı bileşenini gerektirir

Çıktı:

Kod:


<canvas id="canvas" width="578" height="200"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var rectWidth = 150;
    var rectHeight = 75;

    // matris dönüşümü:
    //  1  0  tx
    //  0  1  ty
    //  0  0  1
    var tx = canvas.width / 2;
    var ty = canvas.height / 2;

    // matrisi uygulama
    context.transform(1, 0, 0, 1, tx, ty);

    context.fillStyle = 'blue';
    context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
</script>

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

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

var rectWidth = 150;

var rectHeight = 75;

// matris dönüşümü:

// 1 0 tx

// 0 1 ty

// 0 0 1

var tx = canvas.width / 2;

var ty = canvas.height / 2;

// matrisi uygulama

context.transform(1, 0, 0, 1, tx, ty);

context.fillStyle = 'blue';

context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Transform Kullanımı

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap