如何让Bevy WASM渲染到自定义HTML Canvas或自定义生成Canvas样式？

1. Svelte端传递Canvas元素 #

在Svelte组件中定义自定义Canvas，并在调用WASM初始化函数时将其传入：

<script>
  import init from '../pkg/your_project_name';
  import { onMount } from 'svelte';

  let customCanvas;

  onMount(async () => {
    // 将自定义Canvas元素传入wasm初始化函数
    await init({ canvas: customCanvas });
  });
</script>

<!-- 自定义Canvas，可直接通过类或内联样式控制外观 -->
<canvas bind:this={customCanvas} class="game-canvas"></canvas>

<style>
  .game-canvas {
    width: 100%;
    max-width: 1200px;
    height: 600px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #f8f8f8;
  }
</style>

2. Rust端配置Bevy适配传入的Canvas #

在Bevy应用初始化时，设置窗口参数让引擎使用传入的Canvas元素：

use bevy::prelude::*;
use bevy::window::WindowDescriptor;

fn main() {
    App::new()
        .insert_resource(WindowDescriptor {
            // 可设置初始尺寸，也可完全交由CSS控制
            width: 1200.0,
            height: 600.0,
            // 留空让Bevy自动识别传入的Canvas元素
            canvas: None,
            ..default()
        })
        .add_plugins(DefaultPlugins)
        // 挂载你的游戏逻辑系统
        .run();
}

如果不想自定义Canvas，可在初始化完成后找到自动生成的Canvas并修改样式：

<script>
  import init from '../pkg/your_project_name';
  import { onMount } from 'svelte';

  onMount(async () => {
    await init();
    // 查找Bevy生成的Canvas（默认带有data-bevy-window属性）
    const bevyCanvas = document.querySelector('canvas[data-bevy-window]');
    if (bevyCanvas) {
      // 添加自定义样式类
      bevyCanvas.classList.add('auto-bevy-canvas');
      // 也可直接设置行内样式
      bevyCanvas.style.display = 'block';
      bevyCanvas.style.margin = '0 auto';
    }
  });
</script>

<style>
  .auto-bevy-canvas {
    width: 800px;
    height: 500px;
    border: 2px solid #333;
    background-color: #f0f0f0;
  }
</style>

注意事项 #

• Bevy 0.9及以上版本均支持WASM环境下的Canvas传递
• 若选择通过ID传递Canvas，需在Rust的WindowDescriptor中设置canvas: Some("your-canvas-id".to_string())，同时给Svelte中的Canvas添加对应ID

内容的提问来源于stack exchange，提问作者szammyboi