html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

农民工全体

农民工全体

2016-02-19 11:16

下面这个html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。
一个正常的圆角矩形,我们先假设他四个角的圆角弧度一致因为这样比较好画。我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
提到钩子,如果你看过我介绍arcTo的文章,那么可能你一下就明白了这种图形就可以用arcTo画出来。
我讲arcTo的时候提过,arcTo有个特性就是,他的第2条切线延长也并不会对他画出的线条造成影响(在上文的最后部分),这也为我们画圆角矩形提供了方便,不用担心变形。
下面放出我在国外网站上发现的canvas画圆角矩形的方法,应该是效率最高的了。

代码如下:

//圆角矩形
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
this.beginPath();
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.closePath();
return this;
}

此函数的参数,依次是x坐标,y坐标,宽度,高度,圆角半径。特别要注意最后这个参数圆角半径。
此方法用了4次arcTo画出了一个圆角矩形,他的每个角的弧度都是一样的。此圆角矩形的坐标点也是和矩形一样的左上角,但他的起笔点可不是这里,而是:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
你可以去掉其中的某条线,看看此方法的原理。
当然,提醒一下,不论画什么图形,都要记得闭合路径closePath,避免留下隐患。

这个方法最后有个return this,是为了让你能使用链式语法,如:
ctx.roundRect(200,300,200,120,20).stroke();你不需要的话也可以去掉他。
如果你并不想扩充ContextRenderingContext2D原型,你也可以把这个方法另外做一个函数。
当时发现这个函数的时候,我连arcTo是什么都不知道,所以也没有记住是在哪个网站上发现的,反正不是我原创的,在此感谢作者。

在前文中我一直强调这个方法画出的圆角矩形每个角都是一致的,是因为css3中的border-radius可以很轻松的画出每个角甚至每个角的邻边圆弧不一致的圆角矩形,待我找找canvas中画不规则圆角矩形的办法吧,不过个人觉得挺难的。
展开更多 50%)
分享

猜你喜欢

html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

Web开发
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

html5 Canvas画图教程(9)—canvas中画出矩形和圆形

Web开发
html5 Canvas画图教程(9)—canvas中画出矩形和圆形

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

html5 canvas 画图教程案例分析

Web开发
html5 canvas 画图教程案例分析

HTML5 Canvas自定义圆角矩形与虚线示例代码

Web开发
HTML5 Canvas自定义圆角矩形与虚线示例代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因

Web开发
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因

html5 Canvas画图教程(1)—画图的基本常识

Web开发
html5 Canvas画图教程(1)—画图的基本常识

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何在DataGrid控件中实现自定义分页

如何在DataGrid控件中实现自定义分页

在SQLServer 2005中编写存储过程

在SQLServer 2005中编写存储过程
下拉加载更多内容 ↓