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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 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详解ASCII码对照表与字符转换
2011/12/05 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
超级退弹代码
2008/07/07 Javascript
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
基于python socketserver框架全面解析
2017/09/21 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python文件操作方法详解
2020/02/09 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
大学生求职工作的自我评价
2014/02/13 职场文书
安全标语大全
2014/06/10 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
导游词之凤凰古城
2019/10/22 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python
Hive常用日期格式转换语法
2022/06/25 数据库