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

236
26 февраля 2019, 16:20

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

Answer 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); 
}
<body onload="draw();"> 
  <canvas id="canvas" width="300" height="300"></canvas> 
</body>

Answer 2

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

<svg 
   xmlns:dc="http://purl.org/dc/elements/1.1/" 
   xmlns:cc="http://creativecommons.org/ns#" 
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
   xmlns:svg="http://www.w3.org/2000/svg" 
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
   width="300" 
   height="291" 
   viewBox="0 0 300 291" 
   fill="none" 
   version="1.1" 
   id="svg3727" 
   sodipodi:docname="vector_canvas.svg" 
   inkscape:version="0.92.3 (2405546, 2018-03-11)"> 
  <metadata 
     id="metadata3733"> 
    <rdf:RDF> 
      <cc:Work 
         rdf:about=""> 
        <dc:format>image/svg+xml</dc:format> 
        <dc:type 
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
        <dc:title></dc:title> 
      </cc:Work> 
    </rdf:RDF> 
  </metadata> 
  <defs 
     id="defs3731" /> 
  <sodipodi:namedview 
     pagecolor="#ffffff" 
     bordercolor="#666666" 
     borderopacity="1" 
     objecttolerance="10" 
     gridtolerance="10" 
     guidetolerance="10" 
     inkscape:pageopacity="0" 
     inkscape:pageshadow="2" 
     inkscape:window-width="1920" 
     inkscape:window-height="1017" 
     id="namedview3729" 
     showgrid="false" 
     inkscape:zoom="0.81099656" 
     inkscape:cx="150" 
     inkscape:cy="145.5" 
     inkscape:window-x="-8" 
     inkscape:window-y="-8" 
     inkscape:window-maximized="1" 
     inkscape:current-layer="svg3727" /> 
  <path 
     d="M138.5 290.5C138.5 290.5 120.5 259 81.5 223C42.5 187 0.5 172 0.5 172C0.5 172 65.3065 130.883 96.5 94C124.093 61.374 152.5 0 152.5 0C152.5 0 185.551 45.6 217.5 71C249.912 96.7682 300 116.5 300 116.5C300 116.5 244 148 204 192C164 236 138.5 290.5 138.5 290.5Z" 
     fill="#A7C6CF" 
     id="path3725" /> 
</svg

Исходя из этого кода хотела сделать анимацию на появление элемента. Чтобы он прорисовывался от 0 до своей высоты. Это так и не получилось.

Answer 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;

READ ALSO
Canvas второй цвет, удаление значения из массива
javascript

Canvas второй цвет, удаление значения из массива

Есть canvas с кругамиПроблемы в том, что круги мерцают(это из-за удаления объекта из массива), я вроде бы удаляю тот элемент, который надо и на секунду...

 276
Две inline клавиатуры. Telegtram bot
javascript

Две inline клавиатуры. Telegtram bot

У меня есть две inline клавиатуры если я их последовательно вызываю, то их callback_data путается

 226
как сделать multipart/form-data request вместе с hash ключом?
javascript

как сделать multipart/form-data request вместе с hash ключом?

тут вроде все правильно написал а вот с параметром signature скорее всего ошибка

 240
За что отвечает параметр в COUNT()
MySQL

За что отвечает параметр в COUNT()

Объясните про параметр передаваемый в COUNT(param)

 211