Эта статья в основном представляет простой метод использования холста HTML5 для рисования кривых. Это основные знания во введении в HTML5. Друзья, которые это нужно, могут ссылаться на это.
Собственный метод кривой Canvas2D
Недавно я изучаю расчет трехмерных мягких тел, поэтому я добавляю некоторые знания. Это часто включает в себя некоторый численный анализ, в основном различные алгоритмы интерполяции для кривых. Я вдруг вспомнил, что сам Canvas2D также может рисовать кривые, используя квадратичные и кубические кривые база. На самом деле, я еще не использовал этот метод, давайте попробуем сейчас ~
Эта статья - просто простой рисунок кривой, поэтому давайте не будем говорить о многих сложных принципах. Кроме того, принцип самой кривой баз очень прост, вы можете понять его, посмотрев на Википедию. На самом деле, многие простые инструменты рисования кривой используют кривые BAZ. Если вы использовали кривые в собственных инструментах рисования Windows, вы должны быть знакомы с ними. Сначала вы можете вытащить прямую линию, а затем нажать определенную позицию, чтобы сделать прямую линию. Начальное действие перетаскивания определяет две вершины кривой, а действие щелчка добавляет промежуточную точку. Инструмент рисования, который поставляется с Windows, использует кубические кривые база, и вы можете добавить две промежуточные точки. Кривая Bate отличается от общей полиномиальной интерполяции. Его промежуточная точка используется только в качестве контрольной точки, а не вершина, через которую должна пройти кривая. И это также может сделать закрытые кривые. Canvas2D предоставляет два метода для рисования кривых
Quadraticcurveto: квадратичная кривая базе
Beziercurveto: Cubic Bezel Curve
Линия взята из текущей позиции, а текущая позиция может быть указана методом Moveto. С начальной позицией кривой также необходимы промежуточная точка и конечная позиция. Просто передайте эти координаты позиции в функцию чертежа. Например, квадратичная кривая Батеса требует промежуточной точки и конечной позиции, поэтому два координата должны быть переданы к функции QuadratieCurveto. Координаты состоят из x и y, что означает, что эта функция имеет 4 параметра. Beziercurveto одинаково, за исключением того, что он имеет две промежуточные точки. Давай используем его сейчас
CSS -код копировать контент в буфер обмена