>  기사  >  웹 프론트엔드  >  HTML5에서 캔버스를 지우는 방법

HTML5에서 캔버스를 지우는 방법

藏色散人
藏色散人원래의
2021-05-26 11:49:474065검색

html5에서 캔버스를 지우는 방법: 1. 캔버스를 지우려면 "clearCanvas" 메서드를 사용합니다. 2. 캔버스를 지우려면clearRect 메서드를 사용합니다. 3. 캔버스를 지우려면 특정 색상으로 캔버스를 채웁니다.

HTML5에서 캔버스를 지우는 방법

이 문서의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

html5 캔버스 클리어 캔버스 방법

캔버스를 지우는 세 가지 방법을 요약합니다.

1. 캔버스는 매번 비어 있으므로 높이나 너비가 재설정되면 캔버스 내용이 지워지므로 다음 방법을 사용하여 지울 수 있습니다.

function clearCanvas()
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    c.height=c.height;  
}

2 ClearRect 방법 사용:

function clearCanvas()  
{  
    var cxt=document.getElementById("myCanvas").getContext("2d");
    cxt.clearRect(0,0,c.width,c.height);  
}

3. 2, 지우기 목적을 달성하기 위해 캔버스를 특정 색상으로 채울 수 있습니다.

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

권장 학습: "HTML 비디오 튜토리얼"

위 내용은 HTML5에서 캔버스를 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.