在Canvas中绘制圆角矩形

问题的提出

要在Canvas中绘制一个矩形，使用strokeRect或fillRect函数即可。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeRect(50, 100, 100, 50);
ctx.fillRect(200, 100, 150, 100);

将得到下面的图形：

要想绘制出圆角矩形，好办，将ctx的lineJoin属性设置为round即可。

ctx.lineJoin = "round";
ctx.strokeRect(50, 100, 100, 50);
ctx.fillRect(200, 100, 150, 100);

这是圆角矩形吗？没错，只不过角度太小了。将ctx的lineWidth属性增大一些，效果就出来了。

ctx.lineJoin = "round";
ctx.lineWidth = 20;

ctx.strokeRect(50, 100, 100, 50);
ctx.fillRect(200, 100, 150, 100);

左边的圆角效果出来了，但代价是必须指定线条宽度，以让ctx有空间来填充该线条，才能有圆角效果。若想要更大的圆角，虽可增加lineWidth，但将得到更大的黑框，更丑了。而右边的填充图形，却根本没有圆角效果出现。

ABC, #@^&..., 这不是我们所想要的效果。要得到令人满意的圆角矩形，我们就得自力更生了。

圆角矩形的真谛

我们，想要的是下面这个效果：

经验告诉我们，这个矩形的圆角可大可小。那么这些圆角有何内在规律呢？下图可说明。

矩形的4个角均各自夹着一个与该角之两边相切的圆，将矩形的4个棱角擦掉，只保留两个相切点之间的较短的圆弧，即可得到上面的圆角矩形。

这4个圆的半径均是25。若将半径改为40，得到下图。

矩形的总体特征不变，但圆角增大了。当然，圆角太大了也不一定好看，但上面这两个图形足以说明了圆角矩形的真谛。要想改变矩形圆角的大小，只需改变这些相切圆的半径就行了。

圆角矩形的实现

一个标准矩形与4个相应的圆的关系，这是我们要实现圆角矩形所需考虑的。可以有多种实现方法，既可通过圆形异或的方式，也可通过裁剪的方式，但最直观的方式莫过于通过勾画圆角矩形的外边框来实现了࿰