1

2 个功能(HTML5 画布):

  • arcTo(x1, y1, x2, y2, 半径);
  • arcTo(x1, y1, x2, y2, rx, ry, 旋转);

如何转换为贝塞尔曲线(或二次曲线)?

谢谢。

4

1 回答 1

0

谢谢=)。

var from = [200,200],
    to   = [400,300],
    tan  = [300,300], // tangent
    rad  = 50; // radius

var line = [
    from,
    computeVec(tan[0], tan[1], -tan[0]*2, -tan[1]*2, rad)
];

var quad = [
    tan,
    computeVec(tan[0], tan[1], to[0], to[1], rad)
];

ctx.moveTo(line[0][0], line[0][1]);
ctx.lineTo(line[1][0], line[1][1]);
ctx.bezierCurveTo(quad[0][0], quad[0][1], quad[0][0], quad[0][1], quad[1][0], quad[1][1]);

function computeVec(tanx, tany, x, y, rad){
    x -= tanx;
    y -= tany;
    var hypotenuse = Math.sqrt(x * x + y * y),
        proportion = rad / hypotenuse;
    return [
        tanx + (x * proportion),
        tany + (y * proportion)
    ];
}
于 2012-11-19T10:23:19.813 回答