如何在 HTML5 canvas 上用二次贝塞尔曲线绘制小写 b

Question

想知道如何将半圆弧的定义转化为二次贝塞尔曲线，以小写字母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（我认为这是使用过时的 canvas API）应用到当前的 canvas API对于二次贝塞尔曲线。其中 b 右边是一个半圆。

Answer 1

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>

如何在 HTML5 canvas 上用二次贝塞尔曲线绘制小写 b

How to draw a lowercase b with Quadratic Bezier Curve on HTML5 canvas

graphics

bezier