CSS Paint API: 워크릿

CSS Paint API는 JavaScript 워크릿 함수를 작성하여 배경, 테두리, 마스크를 프로그래밍 방식으로 생성할 수 있게 해 주는 CSS Houdini 기능입니다. 사실상 CSS background-image가 렌더링할 수 있는 범위를 확장합니다.

Paint 워크릿은 별도의 워크릿 범위(메인 스레드가 아님)에서 실행되는 JavaScript 파일입니다. 사용자 지정 CSS 페인터를 등록하면 CSS 값으로 사용할 수 있습니다.

워크릿 클래스는 paint() 메서드를 구현합니다.

기본 JavaScript에서 워크릿을 불러옵니다.

이미지를 허용하는 모든 속성에서 등록된 페인터 이름을 참조합니다.

페인터는 CSS 사용자 지정 속성을 입력 속성으로 선언하여 읽을 수 있습니다.

ctx 매개변수는 PaintRenderingContext2D이며 Canvas 2D 컨텍스트의 제한된 버전입니다. fillRect, arc, bezierCurveTo 등 익숙한 메서드를 사용합니다.

CSS 페인트 API로 다음을 구현할 수 있습니다:

• SVG 없이 복잡한 기하학적 배경 구현
• 가변 데이터 배경(진행률 표시줄, 활동 그래프)
• 사용자 지정 속성으로 구동되는 버튼의 물결 효과
• 복잡한 테두리 효과(점선, 해칭)
• 물결 모양 구분선과 유기적인 도형

페인트 워크릿은 주 스레드 외부(별도의 워크릿 컨텍스트)에서 실행되며 CSS 사용자 지정 속성이 변경될 때만 다시 그립니다. 주 스레드에서 실행되는 캔버스 기반 그리기보다 효율적입니다.

CSS 페인트 API는 크롬 65 이상과 엣지 79 이상에서 지원됩니다. 2024년 현재 파이어폭스와 사파리는 지원하지 않습니다. 점진적 향상 방식으로 사용하십시오.

항상 대체 수단을 제공하고, 지원되는 경우에만 페인트 워크릿을 적용하도록 @supports를 사용하십시오:

그리기를 수행하기 위해 CSS 페인트 워크릿 클래스가 구현하는 메서드는 무엇입니까?

CSS 페인트 API를 사용하면 JavaScript 워크릿으로 CSS 이미지를 프로그래밍 방식으로 생성할 수 있습니다. paint() 메서드를 포함하는 클래스를 작성하고, registerPaint()로 등록한 다음, CSS.paintWorklet.addModule()로 불러오고 background: paint(name)으로 사용하십시오. 페인터는 CSS 사용자 지정 속성을 읽어 데이터에 따라 달라지는 시각 요소를 만들 수 있습니다. @supports로 대체 수단을 제공하십시오.