微信小程序canvas绘制圆角矩形
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序canvas绘制圆角矩形,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1248字,纯文字阅读大概需要2分钟。
内容图文
canvas.save() // 保存之前的绘图
canvas.beginPath() // 开始绘制
canvas.setFillStyle('transparent') // 填充边缘
// arc对应参数含义
// canvas.arc('圆心x轴坐标', '圆心Y轴坐标', '圆的半径', '起始弧度', '终止弧度', '弧度是否逆时针方向:boolean')
//left - 矩形x轴位置 | top - 矩形Y轴位置 | width - 矩形宽度 | height - 矩形高度
canvas.arc(left + width - radius, top + height - radius, radius, 0, Math.PI * 0.5) // 右下角
canvas.lineTo(left + radius, top + height) // 下边线
canvas.arc(left + radius, top + height - radius, radius, Math.PI * 0.5, Math.PI) // 左下角
canvas.lineTo(left, top + radius) // 左边线
canvas.arc(left + radius, top + radius, radius, Math.PI, Math.PI*1.5) // 左上角
canvas.lineTo(left + width - radius, top) // 上边线
canvas.arc(left + width - radius, top + radius, radius, Math.PI * 1.5, Math.PI * 2) // 右上角
canvas.lineTo(left + width, top + height - radius) // 右边线
canvas.closePath() // 连接之前绘制的线段
canvas.setStrokeStyle('rgba(134, 157, 156, 0.5)') // 设置边框颜色 支持rgba 和 十六进制 格式
canvas.stroke() // 绘制矩形
// 如果需要在矩形内放入数据,并且数据有可能超出矩形,建议添加下面方法 防止内容溢出
canvas.clip() // 剪切边框内的内容
canvas.restore() // 恢复之前的绘图```
内容总结
以上是互联网集市为您收集整理的微信小程序canvas绘制圆角矩形全部内容,希望文章能够帮你解决微信小程序canvas绘制圆角矩形所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。