IT培訓-高端面授IT培訓機構
        
          
            云和教育：云和數據集團高端IT職業(yè)教育品牌
            
        
          
    
          

          



          
    
          
        
          
                        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
          
        
          
            
          
                
          
                    
            
                        
          • 
                            國家級
            全民數字素養(yǎng)與技能培訓基地            
                        
            • 
                        
          • 
                            河南省
            第一批產教融合型企業(yè)建設培育單位            
                        
            • 
                        
          • 
                            鄭州市
            數字技能人才（碼農）培養(yǎng)評價聯盟            
                        
            • 
                        
                    
          
                
          
            
          
        
          
    
          

          





          

          
    
          
        
                
          
            
          HTML5中怎樣清除canvas？
          
            
            
                
          • 
                    
            發(fā)布時間：
            
                    
            2023-05-24
            
                
            • 
                
          • 
                    
            版權所有：
            
                    
            云和教育
            
                
            • 
                
          • 
                    
            分享：
            
                    
            
                        
                        
            
                            
                            
                            
                            
                            
                            
                            
                        
            
                        
                        
                    
            
                
            • 
            
          
            
          
                
          

          HTML5 前端中清除 canvas，可以使用 canvas 上下文的 clearRect() 方法。該方法清除指定的矩形區(qū)域，使其完全透明。
          

          以下是如何使用clearRect()清除整個畫布的示例：
          

          const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
          

          在此示例中，我們首先使用 getElementById() 獲取對 canvas 元素的引用。然后，我們使用 getContext(‘2d’) 獲取 canvas 上下文。最后，我們在上下文上調用 clearRect()，傳遞要清除的矩形區(qū)域的坐標(在本例中為整個畫布)。
          

          請注意，調用clearRect()不會重置畫布狀態(tài)，因此在清除操作后，任何應用于上下文的轉換或樣式仍將生效。如果要完全重置畫布狀態(tài)，可以在清除畫布之前調用ctx.save()，在之后調用ctx.restore()：
          

          const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
          

          這將保存當前畫布狀態(tài)，清除畫布，然后恢復保存的狀態(tài)，有效地將畫布重置為其默認狀態(tài)。