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使用技巧5个
Apr 02 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
HTTP中的Content-type详解
Jan 18 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP漏洞全解(详细介绍)
2012/11/13 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP获取文件行数的方法
2015/06/10 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
js切换div css注意的细节
2012/12/10 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python练习程序批量修改文件名
2014/01/16 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python中split方法用法分析
2015/04/17 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python 实现多维数组转向量
2019/11/30 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
2015迎新晚会开场白
2015/05/29 职场文书