Introducing live2d moc3 model into the web-(Adjust style)

src folder

Basically all styles are in the ts file under the src folder. Every time we modify the style, remember to rebuild and let the page reload the modified and packaged js file.

npm run build

Modify bottom background color

The default is black, here I changed it to transparent

Modify background image

Modify canvas size and positioning

The default width and height of the entire screen

  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;