Как сделать анимацию холста в Stencil JS? - PullRequest
Новая
       52

Как сделать анимацию холста в Stencil JS?

0 голосов
/ 05 мая 2020

Я программирую веб-сайт с помощью трафарета JS и хочу добавить анимацию холста. Но он говорит, что width, high имеет значение null, поэтому он не мог это прочитать. Почему это не работает? Я попытался поставить тег скрипта перед тегом холста.

Я перепробовал почти все. А на Inte rnet не могу найти подобных проблем. Проблема в том, что консоль говорит, что не может установить свойство width с внутренним нулем. Но почему?

Вот мой код:

tsx: 

render() {
return (
    <div>
              <canvas id="x"></canvas>
        <button onClick={this.animation}>nfjefjefhewjfhe</button>
    </div>
    );
  }

  animation(){
    var canvas = document.getElementById("x") as HTMLCanvasElement;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // // var bounce : number = 0.7;
    // var gravity : number = 1;
    var c = canvas.getContext('2d') as CanvasRenderingContext2D;
    // var d = canvas.getContext('2d') as CanvasRenderingContext2D;
    // var e = canvas.getContext('2d') as CanvasRenderingContext2D;

    // //first circle
    var yC : number = 200;
    var dyC : number = 2;
    var radiusC : number = 20;
    var seconds : number = 0;

    //second one
    // var xD : number = 200
    // var yD : number = 300;
    // var dyD : number = 1.5;
    // var dxD : number = 2;
    // var radiusD : number = 70;

    //third one
    // var xE : number = 500
    // var yE : number = 300;
    // var dyE : number = 1.5;
    // var dxE : number = -2;
    // var radiusE : number = 70;

    // function draw(){
    //     //first circle
         c.beginPath();
         c.arc(100, yC, radiusC, 0, Math.PI * 2, false);
         c.fillStyle = "#BBD6FF";
         c.fill();

        //second circle
        // d.beginPath();
        // d.arc(xD, yD, radiusD, 0, Math.PI * 2, false);
        // d.fillStyle = "#515151";
        // d.fill();

        // //third circle
        // e.beginPath();
        // e.arc(100, yE, radiusE, 0, Math.PI * 2, false);
        // e.fillStyle = "#00398D";
        // e.fill();
    //}

    // function createAnimation(){
    //     requestAnimationFrame(createAnimation);
    //     //creating circles
    //     draw();
    //     //first circle
    //     if (yC + radiusC + dyC > canvas.height)
    //     {
    //         dyC = -dyC;
    //     }
    //     else{
    //         dyC += gravity;
    //     }

    //     yC += dyC;

        //second circle
        // if (yD + radiusD + dyD > canvas.height)
        // {
        //     dyD = -dyD;
        //     dyD *= 10;
        // }

        // if (xD + radiusD + dxD > canvas.width)
        // {
        //     dxD = -dxD;
        // }
        // yD += dyD;
        // xD += dxD;

        // //third circle
        // if (yE + radiusE + dyE > canvas.height)
        // {
        //     dyE = -dyE;
        //     dyE *= 10;
        // }

        // if (xE + radiusE + dxE > canvas.width)
        // {
        //     dxE = -dxE;
        // }
        // yE += dyE;
        // xE += dxE;

        //  } 
        // createAnimation();
        // console.log(Event);
    }`

css for the tsx:

`/* 
#x{
  border: 1px solid black;
  height: 1000px;
  width: 1000px
} */

body{
  margin: 0;
  height: 1000px;
  width: 1000px;
}
`

The HTML I want to include my component:
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./home.css">
    <script src="../dist/shopsite.js"></script>
    <title>Document</title>
</head>
<body>
    <div class='rahmen'>
      <ladebildschirm-nicole></ladebildschirm-nicole>
      </div>  
    </div`
</body>
</html>`

1 Ответ

0 голосов
/ 05 мая 2020

Проблема в том, что вы неправильно устанавливаете размер. Вы используете оператор сравнения (==) вместо присваивания (=).

Замените это: 

canvas.width == window.innerWidth;
canvas.height == window.innerHeight;

на это: 

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
...