Question

我正在用stencilJS对网站进行编程，我想包含一个画布动画。但是它说width的高是空的，所以它不能读这个。为什么这不起作用？我试图将脚本标签放在画布标签之前。

我几乎尝试了所有事情。而且我在互联网上找不到类似的问题。问题在于控制台说不能用内部null设置属性“ 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>`

Answer 1

问题是您没有正确设置尺寸。您正在使用比较运算符（==）而不是赋值（=）。

更改此：

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

对此：

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

如何在StencilJS中制作画布动画？

1 个答案: