html5 холст анимация конечной точки кривой Безье

Я хочу анимировать конечную точку кривой Безье в координатах x, y на холсте html5 без перерисовки всего штриха. По сути, мне нужно, чтобы конечная точка выглядела так, как будто ее можно перетаскивать, а при перетаскивании она влияет на длину линии.

Это мой текущий стандартный код штриха Безье:

   var canvas = document.getElementById("myCanvas"),
       context = canvas.getContext("2d"),
       controlX1 = 140,
       controlY1 = 10,
       controlX2 = 388,
       controlY2 = 10,
       endX = 388,
       endY = 170;

   context.moveTo(188, 130);
   context.bezierCurveTo(controlX1, controlY1, controlX2, 
   controlY2, endX, endY);
   context.lineWidth = 10;
   context.strokeStyle = "black";
   context.stroke();

Есть ли у кого-нибудь идеи, как это можно сделать без использования такой библиотеки, как Raphael; однако я использую jQuery, так что это доступный ресурс.


canvas animation html endpoint bezier
person sadmicrowave    schedule 15.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

без перерисовки всего штриха.

Это невозможно. То, как вы анимируете объекты в HTML5 Canvas, заключается в их очистке и перерисовке.

библиотека как Рафаэль

Для справки, Raphael использует SVG, а не HTML5 Canvas, и SVG значительно упрощает такие вещи, потому что это сохраненная поверхность для рисования.

Холст — это непосредственная поверхность для рисования. Как только вы рисуете что-то (например, кривую), холст не знает, что было нарисовано или где оно находится. Вы должны следить за всем самостоятельно. Мне кажется, что я часто повторяю это, но я написал простое руководство по обучению сохранению необходимой информации, чтобы сделать холст постоянным, как SVG, который можно найти здесь.

При этом вам может быть лучше использовать SVG (а не Canvas), если ваше запланированное приложение/сайт не будет очень сложным или интенсивным.

person Simon Sarris    schedule 15.03.2012
comment
могу ли я создать оверлей SVG «тип холста» на моем теле документа, который можно уничтожить, когда он мне больше не нужен? В идеале мой штрих кривой будет лежать поверх некоторых элементов, пока пользователь не закроет представление, после чего он исчезнет, ​​и в этом случае я хочу уничтожить контейнер svg. - person sadmicrowave; 15.03.2012
comment
Да, все элементы SVG ничем не отличаются от обычных элементов DOM на странице, которые вы можете создавать/удалять/показывать/скрывать и располагать по своему усмотрению. Взгляните на эти примеры: w3schools.com/svg/svg_examples.asp - person Simon Sarris; 15.03.2012