时间戳

首页 > 解决方案 > 将正弦波包示例转换为反应组件

reactjs - 将正弦波包示例转换为反应组件

问题描述

我正在尝试使用 sine-waves package sine-waves package，在反应应用程序中，我做的第一件事是寻找示例，特别是边界波并​​开始将其转换为反应组件，当我尝试启动应用程序时，它给出了我这个错误： 在此处输入图像描述 画布中是否有问题反应任何帮助将不胜感激......
这是我的尝试：

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 (
      <>
        <h1 id="title">
          <a href="https://github.com/isuttell/sine-waves">SineWaves.js</a>
        </h1>
        <h2 id="sub-title">Border Example</h2>
        <div id="box">
          <h2 id="example-title">Animated Borders</h2>
          <canvas className="wave" id="top-waves" />
          <canvas className="wave" id="left-waves" />
          <canvas className="wave" id="bottom-waves" />
          <canvas className="wave" id="right-waves" />
        </div>
      </>
    );
  }
}

export default SineWave;

标签： reactjscanvassine-wave

解决方案

一般来说，像 uncaught : No Canvas Selected这样的消息要么意味着您根本没有指定画布目标，要么根本无法找到它，因为它不存在。

查看您传递给构造函数的参数SineWaves

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

您是在告诉它查找<canvas>id为right-waves的元素。

尝试设置一个，如：

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

推荐阅读