Как нарисовать строчную букву b с помощью квадратичной кривой Безье на холсте HTML5 - PullRequest
Новая
       55

Как нарисовать строчную букву b с помощью квадратичной кривой Безье на холсте HTML5

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

Хотите знать, как взять определение дуги полукруга и преобразовать его в квадратную кривую Безье, используя в качестве примера строчную букву b. 

var c = document.querySelector('canvas')
var ctx = c.getContext('2d')
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(0, 200)
ctx.lineTo(100, 200)
ctx.quadraticCurveTo(0, 100, 200, 0)
ctx.stroke()
<canvas></canvas>

Я не вижу, как применить this (который, я думаю, использует устаревший API Canvas) к текущему API Canvas дляквадратичные кривые Безье.Где правая сторона b является полукругом.

1 Ответ

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

var c = document.querySelector('canvas')
var ctx = c.getContext('2d')
ctx.width = ctx.height = 100
ctx.beginPath()
ctx.moveTo(0, 20)
ctx.lineTo(0, 40)
ctx.lineTo(10, 40)
half(10, 40, 5, 10, 30)
ctx.lineTo(0, 30)
ctx.stroke()

function half(sx, sy, radius, endx, endy, clock) {
  var x = sx + radius
  var y = sy - radius
  var cpx = sx + radius
  var cpy = sy
  ctx.quadraticCurveTo(cpx, cpy, x, y)
  var x = endx
  var y = endy
  var cpx = sx + radius
  var cpy = endy
  ctx.quadraticCurveTo(cpx, cpy, x, y)
}
<canvas></canvas>
...