我想创建一个显示矢量曲线的自定义参数函数,如贝塞尔曲线。由于它是参数化的,我无法评估每个像素上的曲线。如何显示这样的曲线?
这是我尝试创建不规则的贝塞尔曲线(宽度变化)。它是一系列不同半径的圆。
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
、try10
和的值1000
)。
如何显示正常的贝塞尔曲线?我认为它不是逐像素的……</p>