请问canvas如果画转弯运动

Question

我现在画的是这样的

http://output.jsbin.com/rosoq...

我想在四个角平滑的转弯，应该怎么办呢

Answer 1

贝赛尔曲线了解一下 例子我就不写了，网上随便找了一个教程。

https://github.com/hujiulong/...

Answer 2

圆弧直接用用 arcTo 函数, 送你一个圆角矩形路径函数

function roundRect(x, y, w, h, radius) {
    this.moveTo(x, y + h - radius[3]);
    this.arcTo(x, y, x + 1, y, radius[0]);
    this.arcTo(x + w, y, x + w, y + 1, radius[1]);
    this.arcTo(x + w, y + h, x - 1, y + h, radius[2]);
    this.arcTo(x, y + h, x, y, radius[3]);
}

roundRect.call(ctx,0,0,100,100,[10,10,10,10]) //四个角弧度半径都是 10 的圆角矩形