小程序canvans生成倒角矩形
2021/11/29 11:08:46
本文主要是介绍小程序canvans生成倒角矩形,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
废话不多说,直接上代码
/** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 * @param {Number} x - 矩形的x坐标 * @param {Number} y - 矩形的y坐标 * @param {Number} w - 矩形的宽度 * @param {Number} h - 矩形的高度 * @param {Number} r - 矩形的圆角半径 * @param {String} [c = 'transparent'] - 矩形的填充色 */ export const roundRect = (ctx, x, y, w, h, r, c = '#fff') => { if (w < 2 * r) { r = w / 2; } if (h < 2 * r) { r = h / 2; } ctx.beginPath(); ctx.fillStyle = c; ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.lineTo(x + w, y + r); ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2); ctx.lineTo(x + w, y + h - r); ctx.lineTo(x + w - r, y + h); ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5); ctx.lineTo(x + r, y + h); ctx.lineTo(x, y + h - r); ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI); ctx.lineTo(x, y + r); ctx.lineTo(x + r, y); ctx.fill(); ctx.closePath(); }
这篇关于小程序canvans生成倒角矩形的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04微信小程序如何实现点击图片查看大图功能-icode9专业技术文章分享
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南