ArcticGGTM
@ArcticGGTM

Объединить html+js+css?

Помогите пожалуйста объединить html+js+css чтобы это все было в одном html
Вот что надо объединить объединить https://codepen.io/toshiya-marukubo/pen/QWjgqmK
  • Вопрос задан
  • 154 просмотра
Решения вопроса 2
wapster92
@wapster92 Куратор тега CSS
spoiler
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas#canvas {
            display: block;
            background: #000;
        }
    </style>
    <canvas id="canvas">Canvas not supported.</canvas>
    <script>
        (function() {
  'use strict';
  window.addEventListener('load', function() {
    var canvas = document.getElementById('canvas');

    if (!canvas || !canvas.getContext) {
      return false;
    }

    /********************
      Random Number
    ********************/

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    /********************
      Var
    ********************/

    // canvas 
    var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX = X / 2;
    var mouseY = Y / 2;
    var lightMin = 150;
    var lightMax = 200;

    if (X < 768) {
      lightMin = 100;
      lightMax = 150;
    }

    /********************
      Animation
    ********************/

    window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(cb) {
        setTimeout(cb, 17);
      };

    /********************
      Ball
    ********************/
    
    // var
    var ballNum = 3;
    var balls = [];
    var circleSplit = 12;
    var angleSplit = 360 / circleSplit;
     
    function Ball(ctx, x, y, r) {
      this.ctx = ctx;
      this.init(x, y, r);
    }

    Ball.prototype.init = function(x, y, r) {
      this.a = rand(0, 360);
      this.a1 = -0;
      this.rad1 = this.a1 * Math.PI / 180;
      this.x = x;
      this.y = y;
      this.r = r;
      this.v = rand(3, 5);
      this.rad = this.a * Math.PI / 180;
      this.points = [];
      this.setPoints();
      this.c = {
        r: rand(0, 255),
        g: rand(0, 255),
        b: rand(0, 255)
      };
      this.v1 = {
        x: 0,
        y: 0
      };
    };

    Ball.prototype.setPoints = function() {
      for (var i = 0; i < circleSplit; i++) {
        var pointX = Math.cos(this.rad) * this.r;
        var pointY = Math.sin(this.rad) * this.r;
        var point = [pointX, pointY, rand(0, 360)];
        this.points.push(point);
        this.rad = this.a * Math.PI / 180;
        this.a += angleSplit;
      }
    };

    Ball.prototype.draw = function() {
      ctx = this.ctx;
      ctx.save();
      ctx.globalCompositeOperation = 'lighter';
      ctx.shadowColor = 'rgb(' + this.c.r + ', ' + this.c.g + ', ' + this.c.b + ')';
      ctx.shadowBlur = 100;
      ctx.fillStyle = 'rgb(' + this.c.r + ', ' + this.c.g + ', ' + this.c.b + ')';
      ctx.beginPath();
      var xav1 = (this.points[0][0] + this.points[circleSplit - 1][0]) / 2 + this.x;
      var yav1 = (this.points[0][1] + this.points[circleSplit - 1][1]) / 2 + this.y;
      ctx.moveTo(xav1, yav1);
      for (var i = 1; i < this.points.length - 1; i++) {
        var xav2 = (this.points[i][0] + this.points[i + 1][0]) / 2;
        var yav2 = (this.points[i][1] + this.points[i + 1][1]) / 2;
        ctx.quadraticCurveTo(this.points[i][0] + this.x, this.points[i][1] + this.y, xav2 + this.x, yav2 + this.y);
      }
      ctx.quadraticCurveTo(this.points[circleSplit - 1][0] + this.x, this.points[circleSplit - 1][1] + this.y, xav1, yav1);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    };

    Ball.prototype.transform = function() {
      for (var i = 0; i < this.points.length; i++) {
        this.points[i][0] -= Math.sin(this.points[i][2] * Math.PI / 180);
        this.points[i][1] -= Math.cos(this.points[i][2] * Math.PI / 180);
        this.points[i][2] -= this.v;
      }
    };

    Ball.prototype.changeColor = function() {
      this.c = {
        r: rand(0, 255),
        g: rand(0, 255),
        b: rand(0, 255)
      }; 
    };
    
    Ball.prototype.resize = function() {
      this.x = X / 2;
      this.y = Y / 2;
    };

    Ball.prototype.render = function() {
      this.transform();
      this.draw();
    };

    for (var i = 0; i < ballNum; i++) {
      var ball = new Ball(ctx, X / 2, Y / 2, rand(lightMin, lightMax));
      balls.push(ball);
    }

    /********************
      Render
    ********************/
    
    function render(){
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < balls.length; i++) {
        balls[i].render(i);
      }
      requestAnimationFrame(render);
    }

    render();

    /********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      for (var i = 0; i < balls.length; i++) {
        balls[i].resize();
      }
    }

    window.addEventListener('resize', function() {
      onResize();
    });

    canvas.addEventListener('click', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
      for (var i = 0; i < balls.length; i++) {
        balls[i].changeColor();
      }
    }, false);

  }); 
  // Author
  console.log('File Name / lightBall.js\nCreated Date / April 28, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();
    </script>
</body>
</html>
Ответ написан
@DarkHoIe
Css обернуть в тег <script>перед закрывающим тегом "</head>".  Весь Js в тег "<script>", перед заврывающим "</body>". Про html, думаю, нет смысла писать :-)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы