基础库
wx.createSelectorQuery()
.select(`#${this.element}`)
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
that.canvas = canvas
canvas.width = that.width * that.destZoom
canvas.height = that.height * that.destZoom
ctx.textBaseline = 'top';
ctx.strokeStyle = 'white'
ctx.font = that.font;
that.ctx = ctx
that._drawBackground();
ctx.scale(that.destZoom, that.destZoom)
})
//
const { ltr, rtr, rbr, lbr } = getRadius(radius)
ctx.save()
ctx.fillStyle = color
ctx.beginPath()
ctx.moveTo(x + ltr, y)
ctx.lineTo(x + width - rtr, y)
ctx.quadraticCurveTo(x + width, y, x + width, y + rtr)
ctx.lineTo(x + width, y + height - rbr)
ctx.quadraticCurveTo(x + width, y + height, x + width - rbr, y + height)
ctx.lineTo(x + lbr, y + height)
ctx.quadraticCurveTo(x, y + height, x, y + height - lbr)
ctx.lineTo(x, y + ltr)
ctx.quadraticCurveTo(x, y, x + ltr, y)
ctx.clip();
ctx.closePath()
ctx.fill()
ctx.fillRect(0, 0, 0, 0) // 解决后面clip失效问题
ctx.restore()
插件内:想给画布画一个圆角,效果一直不出来。但是放在小程序内是可以的
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
插件内 我想使整个画布有圆角 但是会失败。在小程序内是正常的