Показать сообщение отдельно
  #8 (permalink)  
Старый 08.04.2019, 21:01
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 123

Работает в таком виде только, если без импорта, спасибо

import React, { Component } from 'react';
import './home.css';


function DotAnimation(element) {
  var maxx = element.offsetWidth;
  var maxy = element.offsetHeight;
  var halfx = maxx / 2;
  var halfy = maxy / 2;
  var canvas = document.createElement("canvas");
  element.appendChild(canvas);
  canvas.width = maxx;
  canvas.height = maxy;
  var context = canvas.getContext("2d");
  var dotCount = 200;
  var dots = [];
  // create dots
  for (var i = 0; i < dotCount; i++) {
    dots.push(new Dot(halfx, halfy));
  }

  // dots animation
  function render() {
    context.fillStyle = "#000000";
    context.fillRect(0, 0, maxx, maxy);
    for (var i = 0; i < dotCount; i++) {
      dots[i].draw(context);
      dots[i].move();
    }
    requestAnimationFrame(render);
  }
  render();
}
// dots class
// @constructor
function Dot(halfx, halfy) {
  this.halfx = halfx;
  this.halfy = halfy;
  this.rad_x = 2 * Math.random() * this.halfx + 1;
  this.rad_y = 1.2 * Math.random() * this.halfy + 1;
  this.alpha = Math.random() * 360 + 1;
  this.speed = Math.random() * 100 < 50 ? 1 : -1;
  this.speed *= 0.1;
  this.size = Math.random() * 5 + 1;
  this.color = Math.floor(Math.random() * 256);
}

// drawing dot
Dot.prototype = {
  draw: function(context) {
    // calc polar coord to decart
    var dx = this.halfx + this.rad_x * Math.cos(this.alpha / 180 * Math.PI);
    var dy = this.halfy + this.rad_y * Math.sin(this.alpha / 180 * Math.PI);
    // set color
    context.fillStyle =
      "rgb(" + this.color + "," + this.color + "," + this.color + ")";
    // draw dot
    context.fillRect(dx, dy, this.size, this.size);
  },

  // calc new position in polar coord
  move: function() {
    this.alpha += this.speed;
    // change color
    if (Math.random() * 100 < 50) {
      this.color += 1;
    } else {
      this.color -= 1;
    }
  }
};

export default class Home extends Component {
	
	componentDidMount() {
		console.log('DOM уже на странице');
		new DotAnimation(document.getElementById("app"));
	};

	render() {		
		return ( 
		<div id="app">
 
		</div>		 
		)
	}	
};
Ответить с цитированием