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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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> |
Yorum Yap