>웹 프론트엔드 >H5 튜토리얼 >html5에서 캔버스를 지우는 방법은 무엇입니까?

html5에서 캔버스를 지우는 방법은 무엇입니까?

php中世界最好的语言
php中世界最好的语言원래의
2018-01-29 10:28:202032검색

이번에는 html5에서 캔버스를 지우는 방법과 html5에서 캔버스를 지울 때 어떤 주의사항이 있는지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

canvas캔버스를 지우는 세 가지 방법을 요약해 보세요.

1. 가장 간단한 방법: 캔버스의 높이나 너비가 재설정될 때마다 캔버스 내용이 지워지므로 다음 방법을 사용할 수 있습니다.

function clearCanvas<span style="font-family: Verdana, Arial, 宋体;">()</span> 
{ 
    var c=document.getElementById("myCanvas"); 
    var cxt=c.getContext("2d"); 
    c.height=c.height; 
}


2.clearRect 메서드 사용:

function clearCanvas() 
{ 
    var c=document.getElementById("myCanvas"); 
    var cxt=c.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(); 
}

믿습니다. 당신은 이 사례를 읽었습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

마우스를 가리키면 텍스트를 표시하기 위해 html의 제목 속성을 사용하는 방법

하이퍼링크를 사용하여 새 창을 열고 html에서 창 속성을 제어하는 ​​방법

HTML 인쇄 코드 지원 페이지 넘기기

IE8

에서 a 태그의 배경 이미지가 표시되지 않는 문제를 해결하는 방법

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

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