html5-canvas - キャンバスにカスタムベクターグラフィックを生成するにはどうすればよいですか？

Question

ベジェ曲線のようなベクトル曲線を表示するカスタムパラメトリック関数を作成したいと思います。パラメトリックなので、各ピクセルの曲線を評価することはできません。このような曲線を表示するにはどうすればよいですか？

これは、不規則なベジェ曲線（幅を変更）を作成するための私の試みです。これは、半径の異なる一連の円です。

CanvasRenderingContext2D.prototype.bezierInk = function(x0, y0, x1, y1, x2, y2, x3, y3, size, steps, random = 1.0) {
  for (var i = 0; i <= 1; i += 1 / steps) {
    var radius = size * (1 - random * Math.random());
    var x = x0 * (1 - i) * (1 - i) * (1 - i) + 3 * x1 * i *(1 - i) * (1 - i) + 3 * x2 * i * i * (1 - i) + x3 * i * i * i; // Bézier
    var y = y0 * (1 - i) * (1 - i) * (1 - i) + 3 * y1 * i *(1 - i) * (1 - i) + 3 * y2 * i * i * (1 - i) + y3 * i * i * i; // Bézier
    this.moveTo(x + radius, y);
    this.arc(x, y, radius, 0, 2 * Math.PI);
  }
  this.fill();
  this.moveTo(x3, y3);
}

私には2つの問題があります：

• 関数はパラメトリックであるため、円は曲線上に均等に配置されません。
• steps円が互いにどれだけ近いかを定義するには、パラメータを設定する必要があります。

例： http： //jsfiddle.net/Scagj/steps （ 、try10およびの値を変更してみてください1000）。

通常のベジェ曲線はどのように表示されますか？ピクセルごとではないと思います…</p>