设置在 WebGL 模式下绘制贝塞尔曲线时使用的分段数。
在 WebGL 模式下，平滑的形状是使用许多平面分段绘制的。增加更多的平面分段使形状看起来更加平滑。
参数 detail 是在绘制贝塞尔曲线时要使用的分段数。例如，调用 bezierDetail(5) 函数将使用 5 个分段来绘制贝塞尔曲线。bezier() function. 默认情况下，detail 是 20。
注意：在 2D 模式下，bezierDetail() 没有效果。
示例
// Draw the original curve.
function setup() {
createCanvas(100, 100);
background(200);
// Draw the anchor points in black.
stroke(0);
strokeWeight(5);
point(85, 20);
point(15, 80);
// Draw the control points in red.
stroke(255, 0, 0);
point(10, 10);
point(90, 90);
// Draw a black bezier curve.
noFill();
stroke(0);
strokeWeight(1);
bezier(85, 20, 10, 10, 90, 90, 15, 80);
// Draw red lines from the anchor points to the control points.
stroke(255, 0, 0);
line(85, 20, 10, 10);
line(15, 80, 90, 90);
describe(
'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
// Draw the curve with less detail.
function setup() {
createCanvas(100, 100, WEBGL);
background(200);
// Set the curveDetail() to 5.
bezierDetail(5);
// Draw the anchor points in black.
stroke(0);
strokeWeight(5);
point(35, -30, 0);
point(-35, 30, 0);
// Draw the control points in red.
stroke(255, 0, 0);
point(-40, -40, 0);
point(40, 40, 0);
// Draw a black bezier curve.
noFill();
stroke(0);
strokeWeight(1);
bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0);
// Draw red lines from the anchor points to the control points.
stroke(255, 0, 0);
line(35, -30, -40, -40);
line(-35, 30, 40, 40);
describe(
语法
bezierDetail(detail)参数
detail
Number:
number of segments to use. Defaults to 20.
Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/curves.js and open a pull request!