canvas画矩形边框,canvas绘制矩形的方法

　　上一篇文章讲了矩形和圆形的画法。都有原生的画布绘制功能要完成。文中提到的圆角矩形只能用其他方法模拟。

　　一个正常的圆角矩形，我们先假设它的四个角的圆角弧度和——一样，因为比较好画。利用将曲面分割成线条的能力，我们很容易发现圆角矩形实际上是由四条钩状曲线组成的。

　　说到钩子，如果你读过我介绍arcTo的文章，那么也许你马上就会明白，这种图形是可以用arcTo绘制的。

　　我在讲arcTo的时候提到，arcTo有一个特点，就是它的第二条切线的延长线不会影响他画的线(在上面最后一部分)，这也为我们画圆角矩形提供了方便，不用担心变形。

　　下面这个用画布画圆角矩形的方法，是我在国外网站上找到的，应该是效率最高的。复制代码如下：

　　//圆角矩形

　　canvasrenderingcontext 2d . prototype . round rect=function(x，y，w，h，r) {

　　if(w lt；2 * r)r=w/2；

　　if(h lt；2 * r)r=h/2；

　　this . begin path()；

　　this.moveTo(x r，y)；

　　this.arcTo(x w，y，x w，y h，r)；

　　this.arcTo(x w，y h，x，y h，r)；

　　this.arcTo(x，y h，x，y，r)；

　　this.arcTo(x，y，x w，y，r)；

　　//this.arcTo(x r，y)；

　　this . close path()；

　　还这个；

　　}

　　该函数的参数依次为x坐标、y坐标、宽度、高度和圆角半径。特别注意最后一个参数——圆角半径。

　　在这个方法中，使用arcTo四次来绘制一个圆角矩形，每个角的弧度都是相同的。这个圆角矩形的坐标点也和矩形的左上角一样，但是他的起点不在这里，而是：

　　你可以去掉其中一行，看看这个方法是如何工作的。

　　当然提醒一下，不管你画什么图形，记得关闭路径——closePath，以免留下隐患。

　　这个方法在末尾有一个return this，这样就可以使用链式语法，比如：

　　ctx.roundRect(200，300，200，120，20)。笔画()；如果你不需要，你可以摆脱他。

　　如果不想扩展ContextRenderingContext2D原型，还可以做这个方法的另一个函数。

　　当时发现这个功能的时候，我连arcTo是什么都不知道，所以也不记得是在哪个网站上找到的。反正不是我最初的想法。在此感谢作者。

　　在上一篇文章中，我一直强调用这种方法画出的圆角矩形所有的角都是一致的，因为css3中的border-radius很容易画出每个角的圆弧不一致甚至每个角的相邻边都不一致的圆角矩形。让我想办法在画布上画不规则的圆角矩形，但我个人觉得还是挺难的。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。