Function init

examples/src/htmlText.ts:23–236

(canvas)

]);

export async function init(canvas) {
  const game = new Game();
  await game.init({
    systems: [
      //@ts-ignore
      new RendererSystem({
        canvas,
        width: 750,
        height: 1000,
        backgroundColor: '#f5f5f5',
      }),
      //@ts-ignore
      new TextSystem(),
    ],
  });

  game.scene.transform.size = {
    width: 750,
    height: 1000,
  };

  // 1. 基础 HTML 文本
  const basicHtmlText = new GameObject('basicHtmlText', {
    position: { x: 0, y: 80 },
    origin: { x: 0.5, y: 0 },
    anchor: { x: 0.5, y: 0 },
  });

  basicHtmlText.addComponent(
    new HTMLText({
      text: '<h1 style="margin:0">欢迎使用 HTMLText</h1>',
      style: {
        fontFamily: 'Arial',
        fontSize: 32,
        fill: '#ff6b6b',
        align: 'center',
      },
    }),
  );

  game.scene.addChild(basicHtmlText);

  // 2. 富文本 - 混合样式
  const richText = new GameObject('richText', {
    position: { x: 0, y: 180 },
    origin: { x: 0.5, y: 0 },
    anchor: { x: 0.5, y: 0 },
  });

  richText.addComponent(
    new HTMLText({
      text: `
        <p style="margin:0">
          这是<strong style="color:#e74c3c">粗体</strong>和
          <em style="color:#3498db">斜体</em>文本，
          还有<span style="text-decoration:underline">下划线</span>。
        </p>
      `,