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的transition属性详解
Dec 15 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
初探nodeJS
2017/01/24 NodeJs
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python学生管理系统
2019/01/30 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
围城读书笔记
2015/06/26 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技