全国服务热线:4008-888-888

技术知识

html5 Canvas画图实例教程(10)—把面拆成线条仿真模

上1篇文章内容我讲了画矩形框和圆形的方式,她们都有原生态的canvas制图涵数可进行。而本文讲的圆角矩形框则仅有根据别的方式仿真模拟出来。
1个一切正常的圆角矩形框,大家先假定他4个角的圆角弧度1致——由于这样较为好画。大家动用把面拆成线条的工作能力,很非常容易就可以发现圆角矩形框实际上是由4条钩子般的曲线图构成。


提到钩子,假如你看过我详细介绍arcTo的文章内容,那末将会你1下就搞清楚了这类图型便可以用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画出了1个圆角矩形框,他的每一个角的弧度全是1样的。此圆角矩形框的座标点也是和矩形框1样的左上角,但他的起笔点可并不是这里,而是:


你能够去掉在其中的某条线,看看此方式的基本原理。
自然,提示1下,无论画甚么图型,都要记得闭合相对路径——closePath,防止留下隐患。

这个方式最终有个return this,是以便让你能应用链条式英语的语法,如:
ctx.roundRect(200,300,200,120,20).stroke();你不必须的话还可以去掉他。
假如你其实不想扩充ContextRenderingContext2D原形,你还可以把这个方式此外做1个涵数。
那时候发现这个涵数的情况下,我连arcTo是甚么都不知道道,因此也沒有记牢是在哪儿个网站上发现的,总之并不是我原創的,在此谢谢作者。

在前文中我1直强调这个方式画出的圆角矩形框每一个角全是1致的,是由于css3中的border-radius能够很轻轻松松的画出每一个角乃至每一个角的邻边圆弧不1致的圆角矩形框,待我找找canvas中画不规律圆角矩形框的方法吧,但是本人感觉挺难的。


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服