收藏
回答

小程序Canvas 插件中clip背景图片失败?

基础库

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()

插件内:想给画布画一个圆角,效果一直不出来。但是放在小程序内是可以的
回答关注问题邀请回答
收藏

2 个回答

  • Demons
    Demons
    2022-05-10

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2022-05-10
    有用
    回复
  • .
    .
    2022-05-11

    插件内 我想使整个画布有圆角 但是会失败。在小程序内是正常的

    2022-05-11
    有用
    回复
登录 后发表内容