Помогите нарисовать canvas!

#javascript #html #css

Просьба помочь нарисовать canvas. Необходимо после сделать анимацию отрисовки этого
canvas при скролле. JS код для скролла написала, а вот canvas вообще не знаю.
    

Ответы

Ответ 1

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#ccc000'

  var p = new Path2D("M 87.309014,9.6815981 C 109.3243,60.00378 146.75974,79.485664
184.54955,98.258795 125.13447,108.87839 113.83075,141.06513 112.2624,177.61602 93.824599,138.22508
67.495779,104.40427 15.021869,89.038824 57.034865,79.449738 79.550768,51.510449 87.309014,9.6815981
Z");
  ctx.stroke(p);
  ctx.fill(p);
}

  



Ответ 2

Пользуясь Вашим советом я получила следующие данные: 




Ответ 3

Я пошла иным путем.

line {
        position: absolute;
        height: 436px;
        width: 480px;
        bottom: -218px;
        left: -166px;
        -ms-transform: rotate(17deg);
        transform: rotate(17deg);
        stroke-dashoffset: 2000;
        stroke-dasharray: 2000;
        stroke-width: 20;
        transition: stroke-dashoffset 10s;
        z-index: -1;
        overflow: hidden;

        &:before {
            content: '';
            width: 275px;
            height: 270px;
            background-color: $color_white;
            border-radius: 100% 0;
            position: absolute;
            z-index: 2;
            -ms-transform: rotate(-24deg);
            transform: rotate(-23deg);
            left: -119px;
            bottom: 127px;
        }

        &:after {                
            content: '';
            width: 255px;
            height: 297px;
            background-color: $color_white;
            border-radius: 100% 0;
            position: absolute;
            z-index: 1;
            -ms-transform: rotate(-24deg);
            transform: rotate(-7deg);
            left: 200px;
            bottom: 11px;
        }

        &_icon {
            height: 500px;
            width: 350px;
            padding-left: 32px;
            position: relative;
            z-index: 1;
            stroke: $color_btn;
            stroke-width: 250;
        }
    }


И сделала анимацию с помощью stroke-dashoffset: 0;