189 8069 5689

HTML5怎么实现圆角矩形

今天小编给大家分享一下HTML5怎么实现圆角矩形的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

我们提供的服务有:成都网站制作、成都网站设计、微信公众号开发、网站优化、网站认证、满城ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的满城网站制作公司

代码如下:

//圆角矩形

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画出了一个圆角矩形,他的每个角的弧度都是一样的。此圆角矩形的坐标点也是和矩形一样的左上角,但他的起笔点可不是这里,而是:

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

当然,提醒一下,不论画什么图形,都要记得闭合路径——closePath,避免留下隐患。

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

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

如果你并不想扩充ContextRenderingContext2D原型,你也可以把这个方法另外做一个函数。

以上就是“HTML5怎么实现圆角矩形”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


网站名称:HTML5怎么实现圆角矩形
文章位置:http://cdxtjz.cn/article/jpcsdh.html

其他资讯