微信小程序canvas 绘制背景图片圆角

// 图片的x坐标
                    let bg_x = 0
                    // 图片的y坐标
                    let bg_y = 0
                    // 图片宽度
                    let bg_w = 346
                    // 图片高度
                    let bg_h = 175
                    // 图片圆角
                    let bg_r = 4
                      
                    // 绘制海报背景图片圆角
                    ctx.save()
                    ctx.beginPath()
                    ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5)
                    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
                    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
                    ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
                    ctx.clip()
                    ctx.drawImage('../static/img/f9f0dd9c8da99e13546581ec1ea904c.png', bg_x, bg_y, bg_w, bg_h)
                    // 恢复之前保存的绘图上下文
                    ctx.restore()

 

posted @ 2022-03-23 13:47  龙卷风吹毁停车场  阅读(584)  评论(0)    收藏  举报