Question

我想创建一个自定义参数函数来显示矢量曲线，就像Bézier曲线一样。由于它是参数化的，我无法评估每个像素的曲线。如何显示这样的曲线？

这是我尝试创建一个不规则的Bézier曲线（改变宽度）。这是一系列不同半径的圆圈。

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);
}

我有两个问题：

由于该功能是参数化的，因此圆圈不会均匀地放置在曲线上。
必须设置steps参数才能定义圆圈彼此的接近程度。

示例：http://jsfiddle.net/Scagj/（尝试更改steps的值，尝试10和1000）。

如何显示正常的贝塞尔曲线？我估计它不是逐个像素的......

如何在画布中生成自定义矢量图形？

0 个答案: