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 相关文章推荐
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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使用GD实现颜色渐变实例
2015/06/02 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
MYSQL支持事务吗
2013/08/09 面试题
好的演讲稿开场白
2013/12/30 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
民主评议党员总结
2014/10/20 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
怎样写家长意见
2015/06/04 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python