/**
* 绘制圆角矩形
* @param {*} x 起始点x坐标
* @param {*} y 起始点y坐标
* @param {*} w 矩形宽
* @param {*} h 矩形高
* @param {*} r 圆角半径
* @param {*} ctx 画板上下文
*/
darwRoundRect(x, y, w, h, r, ctx) {
ctx.save()
ctx.beginPath()
// 左上弧线
ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
// 左直线
ctx.moveTo(x, y + r)
ctx.lineTo(x, y + h - r)
// 左下弧线
ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
// 下直线
ctx.lineTo(x + r, y + h)
ctx.lineTo(x + w - r, y + h)
// 右下弧线
ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
// 右直线
ctx.lineTo(x + w, y + h - r)
ctx.lineTo(x + w, y + r)
// 右上弧线
ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
// 上直线
ctx.lineTo(x + w - r, y)
ctx.lineTo(x + r, y)
ctx.setFillStyle('white')
ctx.fill()
},
小程序Canvas画圆角矩形区域
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
