자바스크립트 캔버스 메소드란 무엇입니까?

javascript 캔버스 메소드에는 createLinearGradient(), createPattern(), ret(), fillRect(), fill(), 스트로크(), clips(), arc(), arcTo() 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

태그는 이미지를 그리는 데 사용됩니다(스크립트, 일반적으로 JavaScript를 통해).

그러나 요소 자체에는 그리기 기능이 없습니다(단지 그래픽용 컨테이너일 뿐입니다). 실제 그리기를 수행하려면 스크립트를 사용해야 합니다.

getContext() 메서드는 캔버스에 그리기 위한 메서드와 속성을 제공하는 객체를 반환합니다.

javascript 캔버스 메소드

색상, 스타일 및 그림자

method	description
createLinearGradient()	선형 그래디언트를 생성합니다(캔버스 콘텐츠에 사용됨).
createPattern()	지정된 요소를 지정된 방향으로 반복합니다.
createRadialGradient()	방사형/원형 그래디언트를 만듭니다(캔버스 콘텐츠에 사용됨).
addColorStop()	그라디언트 개체의 색상과 중지 위치를 지정합니다.

Rectangle

Method	Description
lect()	직사각형을 만듭니다.
fillRect()	"채워진" 직사각형을 그립니다.
strokRect()	사각형을 그립니다(채우기 없이).
clearRect()	주어진 직사각형 내에서 지정된 픽셀을 지웁니다.

Path

Method	Description
fill()	현재 도면(경로)을 채웁니다.
strok()	정의된 경로를 그립니다.
beginPath()	경로를 시작하거나 현재 경로를 재설정하세요.
moveTo()	선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동합니다.
closePath()	현재 지점에서 다시 시작 지점까지의 경로를 만듭니다.
lineTo()	새 점을 추가하고 해당 점에서 마지막으로 지정된 점까지 캔버스에 선을 만듭니다.
clip()	원본 캔버스에서 어떤 모양과 크기의 영역도 잘라냅니다.
quadraticCurveTo()	2차 베지어 곡선을 만듭니다.
bezierCurveTo()	3차 베지어 곡선을 만듭니다.
arc()	호/곡선을 생성합니다(원 또는 부분 원 생성용).
arcTo()	두 접선 사이에 호/곡선을 만듭니다.
isPointInPath()	지정된 지점이 현재 경로에 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

Convert

Method	Description
scale()	현재 도면의 크기를 더 크거나 작게 조정합니다.
rotate()	현재 도면을 회전합니다.
translate()	캔버스의 (0,0) 위치를 다시 매핑합니다.
transform()	플롯의 현재 변환 행렬을 바꿉니다.
setTransform()	현재 변환을 단위 행렬로 재설정합니다. 그런 다음 변환()을 실행합니다.

Text

Method	Description
fillText()	캔버스에 "채워진" 텍스트를 그립니다.
StrokeText()	캔버스에 텍스트를 그립니다(패딩 없이).
measureText()	지정된 텍스트 너비가 포함된 개체를 반환합니다.

이미지 그리기

방법	Description
drawImage()	캔버스에 이미지, 캔버스 또는 비디오를 그립니다.

Pixel Operations

Method	Description
createImageData()	새 빈 ImageData 개체를 만듭니다.
getImageData()	캔버스의 지정된 직사각형에 대한 픽셀 데이터를 복사하는 ImageData 객체를 반환합니다.
putImageData()	지정된 ImageData 객체의 이미지 데이터를 캔버스에 다시 넣습니다.

Others

Method	Description
save()	현재 환경의 상태를 저장합니다.
restore()	이전에 저장된 경로 상태 및 속성을 반환합니다.
createEvent()
getContext()
toDataURL()

【추천 학습: javascript 고급 튜토리얼】

위 내용은 자바스크립트 캔버스 메소드란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!