live2d の moc3 モデルを Web に導入する - (調整スタイル)

ソースフォルダー

基本的にすべてのスタイルは src フォルダーの下の ts ファイルにあり、スタイルを変更するたびに、忘れずに再構築して、変更されたパッケージ化された js ファイルをページに再読み込みさせます。

npm run build

下部の背景色を変更する

デフォルトは黒ですが、ここでは透明に変更しました

背景画像を変更する

キャンバスのサイズと位置を変更する

画面全体のデフォルトの幅と高さ

  public initializeSprite(): void {
    
    
    // const fixedWidth: number = 200; // 设置固定宽度
    // const fixedHeight: number = 280; // 设置固定高度
    //
    // canvas.style.position = 'absolute'; // 设置为绝对定位
    // canvas.style.left = '150px'; // 设置左边距
    // canvas.style.bottom = '36px';
    //
    //
    // canvas.width = fixedWidth;
    // canvas.height = fixedHeight;
    const width: number = canvas.width;
    const height: number = canvas.height;