context.clearRect (x, y, genişlik, yükseklik) tek bir düğmeyle kullanıldığında çalışmaz

Tuvali temizlemek ve aynı düğmenin aynı anda tıklatılması için yeni şekil çizmek istiyorum. "Şekil çiz", verilen parametrelerin şeklini çizen düğmedir. Şimdi tekrar sayfayı yeniden yüklemeden başka bir şekil seçiyorum ve tekrar düğmeye basıyorum, mevcut şekli temizlemeli ve sadece yeni bir tane göstermeli. Ancak mevcut şekil üzerinde yeni bir şekil üzerine yazıyor. Birisi ne yapıyorum yanlış yapabilir miyim?context.clearRect (x, y, genişlik, yükseklik) tek bir düğmeyle kullanıldığında çalışmaz

Kodu:

<!DOCTYPE html> 
 
<html> 
 
    <title>Blue Orchids School</title> 
 
    <head align="centre"><b>Blue Orchids School</b></head> 
 
    <body> 
 
    <button onclick="draw()" type="submit">Draw shape</button><br><br> 
 
    <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"> 
 
    Your browser does not support the HTML5 canvas tag.</canvas> 
 
    <p id="details"></p> 
 
    <script> 
 
     function draw() { 
 
     rendershape("Circle", 4, 22, 5, "Red") 
 
     rendershape("Circle", 4, 220, 5, "Red") 
 
     } 
 
     function rendershape(shape, width, xcoordinate, ycoordinate, colour) 
 
     { 
 
     var c=document.getElementById("myCanvas"); 
 
     var ctx=c.getContext("2d"); 
 
     ctx.clearRect(0,0,c.width,c.height); 
 
     
 
     //To draw a circle 
 
     if(shape=='Circle'||shape=='circle') 
 
     { 
 
      ctx.lineWidth=width; 
 
      ctx.arc(xcoordinate,ycoordinate,50,0,2*Math.PI); 
 
      ctx.fillStyle= colour; 
 
      ctx.fill(); 
 
      ctx.stroke(); 
 
     } 
 

 
     document.getElementById("details").innerHTML += 'Shape: ' + shape + '<br>' + 'Colour : '+ colour + '<br>' +' X-coordinate: '+ xcoordinate + '<br>' +' Y-coordinate: '+ ycoordinate + '<br>' + ' Width: '+ width; 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

kaynak

2016-04-08 Sarang

Tuval DOM öğesi nerede? Tüm HTML kodlarınızı dahil etmediğiniz görülüyor. Tuval öğesini yakaladığınız ** ** ** değişkeni, konsol doğru şekilde çıkış yapılıyor mu? – Shakespeare

Ekledim. Kopyalama kodunu buraya yapıştırırken, "HTML5 kanvas etiketini tarayıcınız desteklemiyor. " Ve evet, console.log – Sarang

değişkenini gösteriyor [Olası düzeltme işlevi tuvali temizlemiyor] (http://stackoverflow.com/questions/13435959/clearrect-function-doesnt-clear-the -canvas) – Nickolay

Sen clearRect() sonra ctx.beginPath() eklemeniz gerekir. Bu iyi bir açıklama: Why clearRect Might Not be Clearing the Canvas Pixels.

biz beginPath() çağırmazsanız, bellekte, her zaman vuruşunun (yığılmasına) ya da() dolduracaktır adlandırılan tüm çizim komutları olarak adlandırılır (ve daha sonra tercihen closePath() kullanılarak bu kapatma) Tüm grafik yollarını çizecek.

kaynak

2016-04-09 11:08:49 Nickolay

Gerçekten işe yaradı! Çok teşekkürler ... Bu bana bir gr8 rölyef verdi :) :) – Sarang

bir yazım hatası durumunda benziyor.

ctx.clearRect(0,0,c.widht,c.height);

Değişim bunun için:

ctx.clearRect(0,0,c.width,c.height);

kaynak

2016-04-08 16:23:52 Shakespeare

Yazım hatası düzeltildi ... hala çalışmıyor :( – Sarang

context.clearRect (x, y, genişlik, yükseklik) tek bir düğmeyle kullanıldığında çalışmaz

cevap

İlgili konular