Работает в таком виде только, если без импорта, спасибо
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>
)
}
};
