HTML5 Canvas Scale Kullanımı

HTML5 Canvas’ı ölçeklemek için canvas bağlamının x ve y bileşenlerini ölçeklendirmek için scale() transform yöntemini kullanabiliriz.

Çı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;

    // translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);

    // scale y component
    context.scale(1, 0.5);

    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;

// translate context to center of canvas

context.translate(canvas.width / 2, canvas.height / 2);

// scale y component

context.scale(1, 0.5);

context.fillStyle = 'blue';

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

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Scale Kullanımı

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap