Как сделать кардиограмму на canvas?

Question

[Triplicate]

Все привет, мне необходимо выполнить анимацию по типу: https://ru.expertoption.com/
У меня есть опыт работы с canvas, но его не достаточно, у меня есть набросок, если что - скину. Конкретно в этой задаче мне не нужно делать плавных линий. В целом, как я понял, нужна анимация с линиями как у кардиограммы.
Не подскажите, как это реализовать ?

P.S Я могу выполнить весь макет, но конкретно эту анимацию - нет, не хочу отказываться от проекта.

Answer 1

[RAX7]

Comments

[Triplicate]

Как же я вам благодарен, спасибо большое, по вашему примеру я уловил суть, хоть я и адепт в canvas. Если что, могу спросить у вас совета?

[RAX7]

Triplicate, пожалуйста, спрашивай если что.

[Rerurk]

RAX7, requestAnimationFrame замыкание если я понял? Круто не знал, хоть я не автор спасибо

[RAX7]

Rerurk, рекурсия https://learn.javascript.ru/js-animation

[Triplicate]

RAX7, Здравствуйте еще раз, не подскажите как сделать такую же рисовку линий, только в стиле электрокардиограммы ? Если выручите - буду бесконечно благодарен

[RAX7]

Triplicate, и что подразумевается под "в стиле электрокардиограммы"? Плавные линии, всплески похожие на сердцебиение или и то, и другое?

[Triplicate]

RAX7,каордината х - одной линией плавных линий, вроде нет, всплески должны быть по типу ритма сердца. И не могли бы подсказать, хороший учебник или материал по canvas, не могу же я вас вечно тревожить, заранее спасибо

Answer 2

[xenonhammer]

Если вы хотите так же, то открывайте тот сайт и смотрите его js

Код с того сайта, изучайте

e.prototype.drawPointsOnChart = function() {
                for (var e = this.width - 20, t = this.counter - e, n = this.getMarginTop(), o = [], a = this, i = 0, c = this.pointsOnChart.length; i < c; i++)
                    !function(e, i) {
                        var c = a.pointsOnChart[e]
                          , l = s.find(a.points, function(e) {
                            return e.index == c.index
                        });
                        if (l) {
                            var u = a.pixelToX(l.x - t)
                              , p = a.pixelToY(l.y + n);
                            if (u < 0)
                                o.push(c.index);
                            else {
                                var f = null
                                  , m = c.size - 2
                                  , d = c.size - 3;
                                m < 0 && (m = 0),
                                d < 0 && (d = 0),
                                f = c.type == r.CALL ? "RGBA(87, 188, 154, 1.00)" : "RGBA(255, 60, 109, 1.00)";
                                var h = 360 * c.progress * (Math.PI / 180);
                                h < 0 && (h = 0),
                                a.ctx.shadowColor = "black",
                                a.ctx.shadowBlur = 10,
                                a.ctx.beginPath(),
                                a.ctx.strokeStyle = f,
                                a.ctx.lineWidth = 2,
                                a.ctx.arc(u, p, m, 0, h),
                                a.ctx.stroke(),
                                a.ctx.closePath(),
                                a.ctx.save(),
                                a.ctx.beginPath(),
                                a.ctx.arc(u, p, d, 0, 2 * Math.PI),
                                a.ctx.closePath(),
                                a.ctx.clip(),
                                a.ctx.drawImage(c.image, u - d, p - d, 2 * d, 2 * d),
                                a.ctx.beginPath(),
                                a.ctx.arc(u, p, d, 0, 2 * Math.PI),
                                a.ctx.clip(),
                                a.ctx.closePath(),
                                a.ctx.restore(),
                                a.ctx.shadowColor = null,
                                a.ctx.shadowBlur = null;
                                var v = 0
                                  , g = "+$" + Math.floor(c.money)
                                  , y = c.name
                                  , E = a.ctx.measureText(g)
                                  , b = a.ctx.measureText(y);
                                b.width + 20 > v && (v = b.width + 20),
                                E.width > v && (v = E.width);
                                var S = v + 20
                                  , _ = 0;
                                a.ctx.beginPath(),
                                a.ctx.globalAlpha = -(c.resultAnimation - 1),
                                _ = c.type == r.CALL ? 24 + 10 * c.resultAnimation : -(40 + d + 2 + 8 + 10 * c.resultAnimation),
                                a.roundRect(u - S / 2, p + _, S, 40),
                                a.ctx.font = "13px Arial",
                                a.ctx.fillStyle = "#fff",
                                a.ctx.fillText(y, u - b.width / 2 + 5, p + _ + 17),
                                a.ctx.font = "bold 13px Arial",
                                a.ctx.fillStyle = f,
                                a.ctx.fillText(g, u - E.width / 2, p + _ + 33),
                                a.ctx.beginPath(),
                                a.ctx.fillStyle = f,
                                a.ctx.globalAlpha = c.directionAnimationOpacity;
                                var w = c.directionAnimation
                                  , O = p + _
                                  , N = u - b.width / 2;
                                c.type == r.CALL ? (O -= -w,
                                O += 15,
                                a.ctx.moveTo(N, O),
                                a.ctx.lineTo(N - 8, O),
                                a.ctx.lineTo(N - 4, O - 6)) : (O -= w,
                                O += 10,
                                a.ctx.moveTo(N, O),
                                a.ctx.lineTo(N - 8, O),
                                a.ctx.lineTo(N - 4, O + 6)),
                                a.ctx.fill(),
                                a.ctx.globalAlpha = 1,
                                a.ctx.closePath()
                            }
                        }
                    }(i);

Comments

[Triplicate]

Спасибо, но я уже просматривал этот фрагмент, мне не очень понятно, поэтому и решил спросить, есть ли вариант поподробнее, может кто уже выполнял такую анимацию

[xenonhammer]

Вот вам еще один пример:

spoiler

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      h1 {
        position: absolute;
        bottom: 10px;
        left: 10px;
        margin: 0;
        color: #FFF;
        z-index: 10;
        font-family: Helvetica, sans-serif;
      }

      #canvas {
        background-color:#FAFAFA;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      }
    </style>
  </head>

  <body>
    <h1>Waves</h1>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type='text/javascript'>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      var waves = ["rgba(157, 187, 210, 0.3)",
                   "rgba(171, 216, 201, 0.3)",
                   "rgba(135, 199, 215, 0.3)",
                   "rgba(223, 233, 235, 0.3)"]

      var i = 0;

      function draw() {
        canvas.width = canvas.width;

        for(var j = waves.length - 1; j >= 0; j--) {
          var offset = i + j * Math.PI * 12;
          ctx.fillStyle = (waves[j]);
          var randomLeft            = (Math.sin(offset/100)  + 1)       / 2 * 200;
          var randomRight           = (Math.sin((offset/100) + 10) + 1) / 2 * 200;
          var randomLeftConstraint  = (Math.sin((offset/60)  + 2)  + 1) / 2 * 200;
          var randomRightConstraint = (Math.sin((offset/60)  + 1)  + 1) / 2 * 200;

          ctx.beginPath();
          ctx.moveTo(0, randomLeft + 100);

          // ctx.lineTo(canvas.width, randomRight + 100);
          ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 100);
          ctx.lineTo(canvas.width , canvas.height);
          ctx.lineTo(0, canvas.height);
          ctx.lineTo(0, randomLeft + 100);

          ctx.closePath();
          ctx.fill();
        }

        i = i + 3;
      }
      setInterval("draw()", 20);
    </script>
  </body>
</html>

[xenonhammer]

Вот еще один пример. Вам следует по гуглитьhttps://an2-studio.xyz/effekt-volny-na-canvas/

[Triplicate]

xenonhammer, Спасибо большое, мне помогли с решением и, конечно же, не без вашего вклада. Всего хорошего )