CSS 페인트 API로 생성 패턴을 만듭니다

이 튜토리얼은 CSS 페인트 API를 사용하여 세 가지 생성 패턴을 만듭니다. HTML, CSS 및 JavaScript에 편안한 개발자를 대상으로 생성 아트와 페인트 API에 대한 온화한 소개를 제공합니다.

웹은 오랫동안 예술적 표현의 캔버스 였지만 CSS는 Houdini 프로젝트의 페인트 API까지 전용 그리기 API가 없었습니다. 이 튜토리얼은이 API를 활용하여 시각적으로 매력적이고 역동적 인 패턴을 만듭니다.

생성 아트 및 CSS 페인트 API :

이 튜토리얼은 알고리즘과 임의성을 사용하여 생성 된 생성 아트를 설명하는 것으로 시작합니다. CSS Paint API는 JavaScript "Paint Worklets"를 통한 CSS 렌더링에 대한 저수준 액세스를 제공합니다. paint() 함수를 포함하는이 작업자는 캔버스와 같은 구문을 사용하여 동적 이미지 생성을 허용합니다. Paint API는 기존 CSS 시스템과 잘 통합되어 속도와 응답 성을 제공하지만 현재 브라우저 지원은 현재 크롬 및 에지 (Chrome and Edge)입니다.

패턴 :

세 가지 별개의 패턴이 탐색됩니다.

• "Tiny Specks": CSS 사용자 정의 속성 (씨앗, 색상, 수, 최소/최대 크기)을 통해 사용자 정의 할 수있는 무작위 크기의 회전 된 타원 패턴. 튜토리얼 세부 사항 워크렛 클래스를 생성하고 속성 및 값 API를 사용하여 입력 속성을 정의하고 paint() 함수를 구현하여 일관된 렌더링을 위해 의사 랜덤 수 생성을 사용하여 스펙을 생성합니다.

• "Bauhaus": 무작위로 선택된 모양 (원, 아크, 사각형, 삼각형) 및 각 셀 내의 회전이있는 그리드 기반 패턴. 이 자습서는 컨테이너에 맞게 고정 크기 패턴을 스케일링하는 scaleCtx 기능을 소개하고 도우기 기능을 도출하기위한 도우미 기능을 도입합니다.

• "Voronoi Arcs": Voronoi Tessellation을 사용하여 유기 형태를 만드는 패턴. 이 자습서는 테셀레이션을 생성하기위한 도우미 기능 ( createVoronoiTessellation )을 소개하며, paint() 함수는 각 Voronoi 셀 내에서 옵션 내부 원으로 아크를 렌더링합니다.

설정 및 코드 구조 :

이 자습서는 개발의 용이성을 위해 Codepen을 사용합니다. Worklet 클래스를 설정하고 registerPaint 및 CSS.paintWorklet.addModule() 사용하여 등록하고 background-image: paint(workletName); . seedrandom 사용하여 결정 론적 무작위성의 중요성은 크기 조정에 대한 깜박임을 피하기 위해 강조됩니다. 이 자습서는 각 패턴에 대한 자세한 코드 스 니펫을 제공하여 논리와 기능을 설명합니다.

무작위 화 및 추가 탐색 :

이 튜토리얼은 --pattern-seed 속성을 동적으로 설정하여 페이지로드의 패턴을 무작위 화하는 방법을 보여줌으로써 결론을 내립니다. 독자들은 제공된 패턴을 실험하고 확장하여 생성 예술 기술의 추가 사용자 정의 및 탐색을 제안합니다. 마지막 도전은 독자들이 페이지 자체에서 숨겨진 생성 작업자를 찾도록 권장합니다.

위 내용은 CSS 페인트 API로 생성 패턴을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!