Javascript.RU

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

Вопрос по коду связанного с DOM
Вот эта кусок кода транслирует анимированный бекграунд сразу в body, а мне нужно что бы транслировал в нужный мне div подскажите пожалуйста где сменить и КАК сменить body на нужный мне div
// init
var maxx = document.body.clientWidth;
var maxy = document.body.clientHeight;
var halfx = maxx / 2;
var halfy = maxy / 2;
var canvas = document.createElement("canvas");
document.body.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());
}

// dots animation
function render() {
  context.fillStyle = "#000000";
  context.fillRect(0, 0, maxx, maxy);
  for (var i = 0; i < dotCount; i++) {
    dots[i].draw();
    dots[i].move();
  }
  requestAnimationFrame(render);
}

// dots class
// @constructor
function dot() {
  
  this.rad_x = 2 * Math.random() * halfx + 1;
  this.rad_y = 1.2 * Math.random() * 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() {
  
  // calc polar coord to decart
  var dx = halfx + this.rad_x * Math.cos(this.alpha / 180 * Math.PI);
  var dy = 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
dot.prototype.move = function() {
  
  this.alpha += this.speed;
  // change color
  if (Math.random() * 100 < 50) {
    this.color += 1;
  } else {
    this.color -= 1;
  }
  
};

// start animation
render();
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2019, 20:02
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,607

var myDiv = document.querySelector('#myDivId'); и все document.body заменить на myDiv
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2019, 20:14
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Сообщение от Rise
document.body заменить на myDiv
Я бы выделил отдельный класс DotAnimation

https://codepen.io/Malleys/pen/XQNpXK
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2019, 20:22
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 112

Пишет что
TypeError: Cannot read property 'clientWidth' of null для var myDiv
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2019, 20:35
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,607

Malleys, пойдет.
NeonMan, нет элемента с таким id значит.
Ответить с цитированием
  #6 (permalink)  
Старый 08.04.2019, 20:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,033

Сообщение от NeonMan
if (Math.random() * 100 < 50)

if (Math.random() < .5) {
Ответить с цитированием
  #7 (permalink)  
Старый 08.04.2019, 20:42
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 112

Дело в том, что я запускаю эту функцию в компоненте react, а этот компонент вырисовывает блок в который должна идти анимация. Может мне как то запустить эту функцию после того, как компонент отрисовал нужный блок. Не очень понятно с импортом тут.
в bg-animation.js лежит вариант от Malleys

import React, { Component } from 'react';
import './home.css';
import * as animation from './bg-animation.js';

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

	render() {		
		return ( 
		<div id="app">

		</div>		 
		)
	}	
};

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

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

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>		 
		)
	}	
};
Ответить с цитированием
  #9 (permalink)  
Старый 08.04.2019, 21:06
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Сообщение от NeonMan
Работает в таком виде только, если без импорта, спасибо
dсё-таки надо с import-ом... Вы не знали про React ref?

https://codesandbox.io/s/m7o21ym6pj
Ответить с цитированием
  #10 (permalink)  
Старый 08.04.2019, 21:29
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 112

Сообщение от Malleys Посмотреть сообщение
dсё-таки надо с import-ом... Вы не знали про React ref?

https://codesandbox.io/s/m7o21ym6pj
Не очень понимаю что делает canvasRoot где то есть подробное описание этого?
И есть ли на этом форуме ветка с React JS ? ^^
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
автоматическое удаление скоупа директивы при удаление dom узла FanAizu Angular.js 0 25.08.2015 21:38
Вопрос. Обращение к DOM элементам в фоне. sibirser Events/DOM/Window 2 20.07.2015 17:38
DOM доформированный из JS не получает скрипт. arachnoz Events/DOM/Window 0 24.07.2014 21:13
Вопрос о циклических ссылках (JavaScript -> Dom -> JavaScipt) BlueIce Events/DOM/Window 10 17.02.2010 20:58
Вопрос по объектам и DOM Hawk Events/DOM/Window 3 14.05.2008 14:04