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


Posted in HTML / CSS onJanuary 09, 2013

上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。
一个正常的圆角矩形,我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。

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


提到钩子,如果你看过我介绍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画出了一个圆角矩形,他的每个角的弧度都是一样的。此圆角矩形的坐标点也是和矩形一样的左上角,但他的起笔点可不是这里,而是:

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


你可以去掉其中的某条线,看看此方法的原理。
当然,提醒一下,不论画什么图形,都要记得闭合路径——closePath,避免留下隐患。

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

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

HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 #HTML / CSS
You might like
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
详解easyui 切换主题皮肤
2019/04/04 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python生成器(Generator)详解
2015/04/13 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
光电信息专业应届生求职信
2013/10/07 职场文书
自荐信范文
2013/12/10 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
股权转让协议书范本
2014/04/12 职场文书
党员承诺书怎么写
2014/05/20 职场文书
导师对论文的学术评语
2015/01/04 职场文书
给老婆的道歉信
2015/01/20 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
Python机器学习之底层实现KNN
2021/06/20 Python