Qaytarılması üçün kətanı təmizləmək üçün necə

Kompozit əməliyyatlar və bir tuval üzərində rəsm çəkməklə sınaqdan keçirdikdən sonra indi şəkilləri və düzeni silməyə çalışıram. Bunu necə edirsiniz?

Digər şəkilləri yenidən tərtib etmək üçün kətanı təmizləmək lazımdır; bu bir müddət ala bilər, buna görə düşünmürəm ki, hər zaman ən yaxşı seçim yeni bir dikdörtgen çəkəcəkdir.

840
26 янв. zənginləşdirmək 26 yanvar 2010-01-26 23:50 '10 at 23:50 2010-01-26 23:50
ответ 21 cavab
 const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); 
1045
26 янв. Pentium10 tərəfindən verilmiş cavab 26 yanvar 2010-01-26 23:52 '10 at 11:52 PM 2010-01-26 23:52

Istifadə: context.clearRect(0, 0, canvas.width, canvas.height);

Bu, bütün kətanı təmizləmək üçün ən sürətli və ən təsviri üsuldur.

Istifadə etməyin: canvas.width = canvas.width;

canvas.width sıfırlama bütün tuval vəziyyətini sıfırlar (məsələn, dəyişikliklər, lineWidth, strokeStyle, və s.), Çox yavaşdır (clearRect ilə müqayisədə), bütün brauzerlərdə işləmir və həqiqətən nə deməkdir etməyə çalışırlar.

Konvertasiya edilmiş koordinatlarla işləmək

Dönüşüm matrisini dəyişdirirsinizsə (məsələn, context.clearRect(0,0,canvas.width,canvas.height) istifadə etmə, rotate və ya translate ), context.clearRect(0,0,canvas.width,canvas.height) çox güman ki context.clearRect(0,0,canvas.width,canvas.height) görünən hissəsini təmizləməyəcəkdir.

border=0

Həll? Kətanı təmizləməzdən əvvəl transformasiya matrisini yenidən qurun:

 // Store the current transformation matrix context.save(); // Use the identity matrix while clearing the canvas context.setTransform(1, 0, 0, 1, 0, 0); context.clearRect(0, 0, canvas.width, canvas.height); // Restore the transform context.restore(); 

Düzenleme: Yalnızca profilleri yaptım ve (Chrome'da), dönüşümü sıfırlamadan, kətan 300x150 (default size)% 10 daha sürətli temizler. Sizin tuvalinizin ölçüsü artdıqca, bu fərq düşür.

Bu nisbətən azdır, amma əksər hallarda sizdən daha əhəmiyyətli dərəcədə daha çox cəlb edəcəyinizə inanıram və performans fərqləri əhəmiyyətli deyil.

 100000 iterations averaged 10 times: 1885ms to clear 2112ms to reset and clear 
678
17 июля '11 в 8:06 2011-07-17 08:06 Cavab 17 Avqust 'da 8 : 06-da Prestaul tərəfindən verilmişdir

Dizgiləri çəksəniz, unutmadığınızdan əmin olun:

 context.beginPath(); 

Əks halda, satırlar silinməyəcəkdir.

201
13 янв. cavab 13 yanvar trembl verildi 2011-01-13 10:12 '11 at 10:12 'də 2011-01-13 10:12

Digərləri artıq sual verən əla bir iş görmüşdilər, ancaq kontekst obyekti üçün sadə clear() metodu sizə faydalı olsaydı (bu mənim üçün idi), burada cavablar əsasında istifadə etdiyim tətbiqdir:

 CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform) { if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); } this.clearRect(0, 0, this.canvas.width, this.canvas.height); if (preserveTransform) { this.restore(); } }; 

İstifadə edin:

 window.onload = function () { var canvas = document.getElementById('canvasId'); var context = canvas.getContext('2d'); // do some drawing context.clear(); // do some more drawing context.setTransform(-1, 0, 0, 1, 200, 200); // do some drawing with the new transform context.clear(true); // draw more, still using the preserved transform }; 
110
15 марта '12 в 18:05 2012-03-15 18:05 Cavab JonathanK tərəfindən martın 15-də saat 12: 00-da saat 18: 05-da verilir
  • Chrome yaxşı cavab verir: context.clearRect ( x , y , w , h ); , @ Pentium10 təklif etdiyi kimi, lakin IE9 bu təlimatı tamamilə görməmiş görünür.
  • IE9 cavab verir: canvas.width = canvas.width; , lakin ilk genişlik əvəzinə @John Allsopp həllini istifadə etmədiyiniz halda, xətlər, yalnız şəkillər, şəkillər və digər obyektlərin təmizlənməməsi.

Belə ki, əgər belə bir kətan və kontekstiniz yaradılıbsa:

 var canvas = document.getElementById('my-canvas'); var context = canvas.getContext('2d'); 

Bu üsuldan istifadə edə bilərsiniz:

 function clearCanvas(context, canvas) { context.clearRect(0, 0, canvas.width, canvas.height); var w = canvas.width; canvas.width = 1; canvas.width = w; } 
34
03 нояб. cavab 03 noyabr tarixində qumbara ilə verilir. 2010-11-03 12:48 '10 at 12:48 2010-11-03 12:48

X, y koordinatlarını, həmçinin tuvanın hündürlüyü və genişliyini göstərən clearRect metodunu istifadə edin. ClearRect bütün tuvarı təmizləyəcək:

 canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); 
19
13 нояб. Cavab Vishwas Noyabr 13 verilir. 2013-11-13 09:08 '13 'da 9:08' da 2013-11-13 09:08

Burada yaxşı bir cavab ton var. Digər bir qeyd isə bəzən kətanı qismən təmizləmək üçün əyləncəlidir. yəni əvvəlki təsvirin "fade" və tamamilə silinməməsi. Bu, cazibədar təsirlərə səbəb ola bilər.

Bu asandır. Arka plan rənginin ağ olduğunu varsayalım:

 // assuming background color = white and "eraseAlpha" is a value from 0 to 1. myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")"; myContext.fillRect(0, 0, w, h); 
13
04 мая '12 в 7:36 2012-05-04 07:36 cavab 04 may 2012-ci il tarixində saat 07:36 'də orion elenzil tərəfindən verilmişdir 2012-05-04 07:36

Bu, 2018-ci ildir və hələ də yenidən hazırlamaq üçün kətanı tamamilə təmizləmək üçün heç bir yol yoxdur. clearRect() tamamilə təmizləmir. Boş bir növün rəsmləri rect() məsələn, rect() )

1. Kətanı tamamilə təmizləmək üçün, necə boya çəkdiyinizdən asılı olmayaraq:

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

Pros: bar stilini saxlayır, fillStyle və s .; Heç bir gecikmə yoxdur;

Eksiler: Əgər bir şey çəkmədən əvvəl zəngin startPath istifadə etsəniz lazım deyil

2. Genişlik / hündürlük hack istifadə:

 context.canvas.width = context.canvas.width; 

Və ya eyni

 context.canvas.height = context.canvas.height; 

Pros: IE ilə işləyir. Dəyişikliklər: StrokeStyle, fillStyle-ni qara rəngə yığın; gecikmə;

Niyə doğma bir həll olmadığını düşünürdüm. Əslində, clearRect() bir xəttli həll kimi qəbul edilir, çünki istifadəçilərin çoxu yeni bir yol beginPath() əvvəl beginPath() . StartPath yalnız rect(). kimi qapalı bir yolla deyil, xətləri çəkərkən istifadə edilməlidir rect().

Qəbul edilən cavab mənim problemimi həll etməməsinin səbəbi idi və mən hackingin müxtəlif yollarından istifadə etməyə çalışan saatlar keçirdim. Mozilla lənət edirəm

9
08 мая '18 в 15:29 2018-05-08 15:29 cavab sziraqui verilir May 08 '18 at 15:29 2018-05-08 15:29

Bunu etmək üçün sürətli bir yol

 canvas.width = canvas.width 

Idk necə işləyir, amma bunu edir!

5
08 мая '18 в 19:56 2018-05-08 19:56 Cavab mayor Morris May 08 '18' də 19:56 2018-05-08 19:56 'də verilir
 function clear(context, color) { var tmp = context.fillStyle; context.fillStyle = color; context.fillRect(0, 0, context.canvas.width, context.canvas.height); context.fillStyle = tmp; } 
4
11 апр. Təsəvvür edin 2014-04-11 14:39 '14 da 14:39 2014-04-11 14:39

Mən test etdiyim bütün brauzerlərdə, ən sürətli yol, həqiqətən, ağ və ya istənilən rəng ilə doldurmaqdır. Çox böyük bir monitor var və tam ekran rejimində aydınRect ağrılı şəkildə yavaşdır, amma fillRect ağıllıdır.

 context.fillStyle = "#ffffff"; context.fillRect(0,0,canvas.width, canvas.height); 

Dezavantaj, kətanın artıq şəffaf olmasıdır.

4
26 марта '13 в 1:29 2013-03-26 01:29 Cavab Yəhya tərəfindən verilir: Mart '13, 1:29 2013-03-26 01:29

Chart.js-də mənim pie chart üçün çalışdı

 <div class="pie_nut" id="pieChartContainer"> <canvas id="pieChart" height="5" width="6"></canvas> </div> $('#pieChartContainer').html(''); //remove canvas from container $('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container 
4
26 февр. Cavab Sanal S 26 fevral. 2016-02-26 15:36 '16 saat 15:36 'də 2016-02-26 15:36

webkitdə genişliyi başqa bir dəyərə təyin etməli, sonra onu orijinal dəyərinə qaytara bilərsiniz

4
02 авг. John Allsopp tərəfindən verilmiş cavab Aug 02 2010-08-02 07:50 '10 at 7:50 2010-08-02 07:50

Həddindən çox və matris dönüşümlərindən asılı olmayaraq mən istifadə edirəm:

 function clearCanvas(canvas) { const ctx = canvas.getContext('2d'); ctx.save(); ctx.globalCompositeOperation = 'copy'; ctx.strokeStyle = 'transparent'; ctx.beginPath(); ctx.lineTo(0, 0); ctx.stroke(); ctx.restore(); } 

Əslində, kontekstin mövcud vəziyyətini saxlayır və globalCompositeOperation kimi copy ilə şəffaf bir pixel çəkir. Daha sonra əvvəlki kontekst dövlətini bərpa edir.

3
28 мая '18 в 18:14 2018-05-28 18:14 cavabı 28 may 1818- da 18:14 2018-05-28 18:14 tarixində superruzafa tərəfindən verilir

Ən sürətli yol:

 canvas = document.getElementById("canvas"); c = canvas.getContext("2d"); //... some drawing here i = c.createImageData(canvas.width, canvas.height); c.putImageData(i, 0, 0); // clear context by putting empty image data 
2
13 авг. cavab elser 13 aug verilir . 2012-08-13 21:32 '12 at 21:32 2012-08-13 21:32

Sadə, lakin çox oxunaqlı bir yoldur:

 var canvas = document.getElementId('canvas'); // after doing some rendering canvas.width = canvas.width; // clear the whole canvas 
2
25 авг. cavab Çan 25 aug. 2017-08-25 00:34 '17 'də 0:34 2017-08-25 00:34' da
 context.clearRect(0,0,w,h) 

bu düzbucağı RGBA dəyərləri ilə doldurun:
0 0 0 0: Chrome ilə
0 0 0 255: FF və Safari ilə

Lakin

 context.clearRect(0,0,w,h); context.fillStyle = 'rgba(0,0,0,1)'; context.fillRect(0,0,w,h); 

Dikdörtgen 0 0 0 255 ilə doldurulsun
brauzerdən asılı olmayaraq!

0
12 дек. 12 dekabrda Philippe Oceangermanique tərəfindən cavab verildi . 2016-12-12 12:53 '16 'da 12:53' də 2016-12-12 12:53
 Context.clearRect(starting width, starting height, ending width, ending height); 

Məsələn: context.clearRect(0, 0, canvas.width, canvas.height);

0
30 сент. Cavab Gavin T 30 Sep tərəfindən verilir. 2017-09-30 18:38 '17 saat 18:38 'də 2017-09-30 18:38

Yalnızca ClearRect istifadə etsəniz, şəklinizi göndərmək üçün formana sahibsənsə, bir göndərmə və sonra təmizləyin, ya da bəlkə onu əvvəl təmizləyin və sonra boş bir şəkil yükləyin, beləliklə preventDefault funksiyasını əlavə etmək lazımdır funksiyanın başlanğıcı:

  function clearCanvas(canvas,ctx) { event.preventDefault(); ctx.clearRect(0, 0, canvas.width, canvas.height); } <input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);"> 

Bu birinə kömək edir.

0
10 янв. Cavab JoelBonetR Jan 10 tərəfindən verilir 2017-01-10 21:14 '17 at 21:14 2017-01-10 21:14

Mən həmişə istifadə edirəm

 cxt.fillStyle = "rgb(255, 255, 255)"; cxt.fillRect(0, 0, canvas.width, canvas.height); 
0
11 янв. Cavab GameMaster Jan 11 tərəfindən verilir 2019-01-11 23:45 '19 saat 11:45 'də 2019-01-11 23:45

Bunlar standart bir kətanı necə təmizləyəninizin gözəl nümunələridir, amma kağızlar istifadə etsəniz bu işləyəcək:

Javascript-də qlobal dəyişənləri müəyyənləşdirin:

 var clearCanvas = false; 

PaperScript-dən aşağıdakıları müəyyənləşdirin:

 function onFrame(event){ if(clearCanvas  project.activeLayer.hasChildren()){ project.activeLayer.removeChildren(); clearCanvas = false; } } 

İndi ClearCanvas'ı doğru olaraq təyin edərkən, ekranın bütün elementlərini təmizləyir.

-2
12 апр. Cavab Robert Ogle tərəfindən 12 Aprel tarixində verildi 2012-04-12 18:58 '12 at 18:58 2012-04-12 18:58