Примеры 3 способов нарисовать круг на холсте HTML5 - PullRequest
Новая
       55

Примеры 3 способов нарисовать круг на холсте HTML5

0 голосов
/ 30 января 2019

Я могу несколько собрать воедино способ нарисовать круг, используя метод ctx.arcTo, но у меня возникают трудности с пониманием того, как применять уравнения Безье для общего рисования эллипса или круга (произвольно близкого приближения одного), используя их.

Хотите знать, какова будет реализация этих трех методов для рисования дуги (сегмента или всего, эллипса или круга) из точки a в точку b, выпуклой или выпуклой. 

var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')

ctx.moveTo(0, 0)
arcTo(ctx, 100, 100, 50, 50, 20, 20)
cubicTo(ctx, 110, 110, 10, 10, 120, 120)
quadTo(ctx, 210, 210, 10, 10, 220, 220)

function arcTo(ctx, xi, yi, r1, r2, xf, yf, bulgeIn) {
  ctx.save()
  ctx.beginPath()
  ctx.moveTo(xi, yi)
  ctx.arc(xi, yi, xf, yf, r1)
  ctx.closePath()
  ctx.stroke()
  ctx.restore()
}

function cubicTo(ctx, xi, yi, r1, r2, xf, yf, bulgeIn, approximationLevel) {
  // ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
}

function quadTo(ctx, xi, yi, r1, r2, xf, yf, bulgeIn, approximationLevel) {
  // ctx.quadraticCurveTo(cpx, cpy, x, y)
}
<style>
  canvas {
    background: #eee;
    width: 200px;
    height: 200px;
  }
</style>

<canvas></canvas>

Мне интересно, как делать и эллипсы, и круги под любым углом, с любым отрезком длины части окружности.В основном только общая формула для холста html5.

enter image description here

1 Ответ

0 голосов
/ 31 января 2019

Все это основано на том же принципе: вы можете нарисовать круг или эллипс, взяв их параметрическую формулу (x² + y² = некоторая константа и x² / a + y² / b = некоторая константа, соответственно) и присоединившись к действительнымочки для этих формул.Каким-то образом.Вы можете просто выбрать точки, которые находятся так близко, что нечего «соединять», поскольку последующие точки буквально являются «следующим пикселем» (что и делает arcTo), но вы также можете разнести их дальше друг от друга, а затем вы можете объединить вещи вверхиспользуя:

  • линии
  • квадратные кривые Безье
  • кубическая кривая Безье
  • буквально любой вид кривой, поскольку вы знаете всеточки, которые нужно пройти, через

Задача не в том, чтобы соединить точки, а в том, чтобы узнать, насколько далеко друг от друга могут быть точки, прежде чем все начнет выглядеть довольно дерьмово.

Например, для квадратичных кривых Безье вам нужно 8 или более кривых, чтобы все выглядело прилично .Меньше, и это начинает выглядеть плохо.Для кубических кривых Безье обычно достаточно 4 .Для других типов кривых это действительно зависит от математики, которую вам или кому-то еще придется потрудиться, чтобы определить, сколько очков вам понадобится, чтобы все выглядело правильно.

Но на самом деле,используйте arcTo или даже circle () и ellipse (), если у используемого вами языка программирования есть такие.Не приближайтесь, если вы можете просто нарисовать то, что вам нужно было нарисовать.

...