标签：canvas 微信 top 圆角 radius PI Math left

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,微信,top,圆角,radius,PI,Math,left
来源： https://blog.csdn.net/Hope_wkx/article/details/116201247

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。