преобразовать примеры пакетов синусоидальных сигналов в реагирующий компонент

Question

• 1000 При попытке запустить приложение выдает такую ​​ошибку: is there a problem in canvas with react any help will be appreciated ...
this is my attempt:

import React from 'react';
import SineWaves from 'sine-waves';
import _ from 'lodash';

class SineWave extends React.Component {
  width = 300;

  height = 300;

  amplitude = 20;

  speed = 1;

  ease = 'SineInOut';

  waves = [
    {
      timeModifer: 2,
      lineWidth: 1,
      amplitude: this.amplitude,
      wavelength: 100,
      segmentLength: 1,
      strokeStyle: 'rgba(255, 255, 255, 0.3333)',
      type: 'Sawtooth',
    },
    {
      timeModifer: 2,
      lineWidth: 1,
      amplitude: -this.amplitude / 2,
      wavelength: 100,
      segmentLength: 1,
      strokeStyle: 'rgba(255, 255, 255, 0.3333)',
      type: 'Sawtooth',
    },
    {
      timeModifer: 2,
      lineWidth: 1,
      amplitude: -this.amplitude,
      wavelength: 100,
      segmentLength: 1,
      strokeStyle: 'rgba(255, 255, 255, 0.3333)',
      type: 'Square',
    },
  ];

  render() {
    const { speed, width, height, ease, waves } = this;
    const bottomWaves = new SineWaves({
      el: document.getElementById('bottom-waves'),

      speed,
      width,
      height,
      ease,
      waves: _.clone(waves, true),
      rotate: 0,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    const topWaves = new SineWaves({
      el: document.getElementById('top-waves'),

      speed: -speed,
      width,
      height,
      ease,
      waves: _.clone(waves, true),
      rotate: 0,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    const leftWaves = new SineWaves({
      el: document.getElementById('left-waves'),

      speed,
      width: height,
      height: width,
      ease,
      waves: _.clone(waves, true),
      rotate: 90,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    const rightWaves = new SineWaves({
      el: document.getElementById('right-waves'),

      speed: -speed,
      width: height,
      height: width,
      ease,
      waves: _.clone(waves, true),
      rotate: 90,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    return (
      <>
          SineWaves. js  Пример границы  Анимированные границы   ); }} экспорт по умолчанию SineWave; 

Answer 1

Вообще говоря, сообщение типа uncaught: Canvas Selected либо означает, что вы вообще не указали цель холста, либо оно просто не может найти ее, потому что она не существует.

Глядя на параметры, которые вы передаете конструктору SineWaves

   const rightWaves = new SineWaves({
      el: document.getElementById('right-waves'),

, вы говорите ему искать элемент <canvas> с идентификатором правые волны .

Попробуйте настроить его, например:

<canvas id="right-waves"></canvas>