详述Canvas(五)/绘制圆角矩形
来源:互联网 发布:淘宝网光威官方旗舰店 编辑:程序博客网 时间:2024/06/05 00:45
来源:http://blog.csdn.net/liuyan19891230/article/details/51259147
Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。
我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处,然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述)。此处我们将终点设为(x+w,y+h);这就是第一段曲线。第一段曲线绘制完毕之后,画笔落在了下图绿色点的位置。
现在再看下第二段曲线:
因此我们直接使用arcTo(x+w,y+h,x,y+h,r)绘制出第二个圆角,第二个曲线绘制完毕后,画笔落在了绿色点位置。
我们可以使用同样的方法来绘制第三个圆角。
acrTo(x,y+h,x,y,r)
第四个圆角arcTo(x,y,x+w,y):
这样,一个圆角矩形就完成了。为了方便使用,我们可以将绘制圆角矩形的方法封装在一个函数,或者加入到CanvasRenderingContext2D的原型中。
x,y是矩形的起点;w,h是矩形的宽高;r是圆角矩形的半径.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
这里使用了return this,这样我们就可以像使用jquery一样,使用链式语法。
完整代码如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
阅读全文
0 0
- 详述Canvas(五)/绘制圆角矩形
- 详述Canvas(五)/绘制圆角矩形
- Canvas绘制圆角矩形
- canvas.drawRoundRect方法,绘制圆角矩形
- 在Canvas中绘制圆角矩形
- html5 canvas 绘制圆角矩形
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- Canvas绘制圆角矩形时的圆角粗边问题
- html5<canvas>标签绘制矩形,线条,圆
- HTML5 Canvas: 绘制矩形
- canvas绘制矩形
- canvas绘制矩形
- Canvas学习:绘制矩形
- 详述Canvas(四)/绘制曲线
- 详述Canvas(四)/绘制曲线
- Canvas使用 -- 在canvas上绘制圆角矩形并添加文字
- html5中canvas绘制矩形
- canvas-系统函数绘制矩形
- win10 Ubuntu16.04双系统安装方法
- low people
- ognl # % 的作用(井号,星号,百分号)
- Linux连接redis数据库
- PAT Basic 1029
- 详述Canvas(五)/绘制圆角矩形
- Shell(十)
- 「POJ 3693」Maximum repetition substring
- 11月30日
- 用AudioBuffer里的数据得到音量
- servlet -> (1)
- indexOf和includes的区别
- JS(二十三)懒加载
- 运筹学(2)-牛顿法