캔버스 속 HTML

HTML In Canvas

HTML·DOM 요소를 WebGPU 텍스처 레이어로 그립니다. Chrome Canary와 실험용 기능 플래그가 필요합니다.

다른 이름: HTMLInCanvasDOMTextureHTML textureDOM texture

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, HTMLInCanvas } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <HTMLInCanvas>
        <h1>Your HTML content here</h1>
      </HTMLInCanvas>
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, HTMLInCanvas } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <HTMLInCanvas>
      <h1>Your HTML content here</h1>
    </HTMLInCanvas>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, HTMLInCanvas } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <HTMLInCanvas />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, HTMLInCanvas } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <HTMLInCanvas>
        <h1>Your HTML content here</h1>
      </HTMLInCanvas>
    </Shader>
  )
}

JavaScript

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'HTMLInCanvas',
    }
  ]
}, { disableTelemetry: true })

속성(props) · `HTMLInCanvas`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이 컴포넌트에는 조절할 속성이 없습니다.

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

웹페이지의 HTML 요소를 캡처해 캔버스에 올린 화면처럼, 기존 DOM을 셰이더의 텍스처 레이어로 가져옵니다.

레지스트리에 설정 props는 없습니다. 대신 `<canvas layoutsubtree>`의 직접 자식 요소가 캡처할 콘텐츠가 되며, 그 DOM이 바뀌면 새 화면을 반영합니다.

이 기능은 `chrome://flags/#canvas-draw-element`를 켠 Chrome Canary에서만 실험할 수 있고 업스트림도 프로덕션 사용에 적합하지 않다고 안내합니다. 브라우저 지원이 제한되므로 제품 기능 대신 프로토타입이나 지원 환경을 통제할 수 있는 데모에 쓰세요.

언제 쓰나

기존 DOM을 셰이더 효과와 합성하는 프로토타입, 애니메이션 HTML 콘텐츠를 캔버스 레이어와 함께 보여 주는 통제된 데모에 좋습니다. 브라우저 지원이 보장되어야 하는 프로덕션 기능에는 피하세요.

속성(props) · HTMLInCanvas

함께 보기

텍스트Text

이미지 텍스처Image Texture

비디오 텍스처Video Texture

웹캠 텍스처Webcam Texture

언제 쓰나

속성(props) · `HTMLInCanvas`