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个属性
Mar 04 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS极坐标的实例代码
Jun 03 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
如何将数据从文本导入到mysql
2006/10/09 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
详解Python IO口多路复用
2020/06/17 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
八一建军节活动方案
2014/02/10 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis