HTML5 Canvası Temizle

HTML5 Canvası temizlemek için, clearRect() yöntemini kullanabiliriz. Bu, canvas genişliğini ve yüksekliğini sıfırlama veya canvas elemanını tahrip etme ve sonra yeniden oluşturma gibi tuvali temizlemek için diğer tekniklerden çok daha iyi performans gösterir.

Not: Temizlemek için temizle butonuna tıklayın.

Kod:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="temizle">Temizle</button>
    <canvas id="canvas" width="578" height="200"></canvas>
    
    <script>
        var canvas = document.getElementById('canvas');
        var btn = document.getElementById('temizle');
        var context = canvas.getContext('2d');

        // birşeyler yazın
        context.font = '40pt Calibri';
        context.fillStyle = 'blue';
        context.fillText('Merhaba Dünya!', 150, 100);

        btn.onclick=()=>{
            context.clearRect(0, 0, canvas.width, canvas.height);
        }   
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<button id="temizle">Temizle</button>

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

var btn = document.getElementById('temizle');

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

// birşeyler yazın

context.font = '40pt Calibri';

context.fillStyle = 'blue';

context.fillText('Merhaba Dünya!', 150, 100);

btn.onclick=()=>{

context.clearRect(0, 0, canvas.width, canvas.height);

}

</script>

</body>

</html>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvası Temizle

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap