首页 > 作文

html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

更新时间:2023-04-03 06:22:43 阅读: 评论:0

上一篇文章我讲了的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。

一个正常的圆角矩形,我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。

提到钩子,如果你看过我介绍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.clopat四级听力耳机h();

return this;

}

此函数的参数,依次是x坐标,y坐标,宽度,高度,圆角半径。特别要注意最后这个参数——圆角半径。

此方法用了4次arcto画出了一个圆角矩形,他的每个角的弧度都是一样的。此圆角矩形的坐标点也是和矩形一样的左上角,但他的起笔点可不是这里,而是:

你可以去掉其中的某条线,看看此方法的原理。

垂直平分线的画法当然,提醒一下惊蛰习俗,不论画什么图形,都要记得闭合路径——clopath,避免留下隐患。

这个方法最后有个return this,是为了让你能使用链式语法,如:

ctx.roundrect(200,300,200,120,20).stroke();你不需要的话也可以去掉他。

如果你并不想扩充c朋友对手ontextrenderingcontext2d原型,你也可以把这个方法另外做一个函数。

当时发现这个函数的时候,我连arcto是什么都不知道,所以也没有记住是在哪个网站上发现的,反正不是我原创的,在此感谢作者。

在前文中我一直强调这个方法画出的圆角矩形每个角都是一致的,是因为css3中的border-radius可以很轻松的画出每个角甚至每个角的邻边圆弧不一致的圆角矩形,待我找找canvas中画不规则圆角矩形的办法吧,不过个人觉得挺难的。

本文发布于:2023-04-03 06:22:42,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/a124346e8b38e2886b8ff21c347453e7.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形.doc

本文 PDF 下载地址:html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形.pdf

标签:矩形   圆角   方法   画出
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图