收藏
回答

ctx.draw,ctx.clip,ctx.arc绘圆形图切图问题

问题模块
API和组件

图片才写圆形,安卓和模拟器可以裁切圆形,ios不能裁切




ctx.save()

ctx.beginPath()

ctx.arc(wWith * 0.129,

wHeight * 0.858,

wWith * 0.075, 0, 2 * Math.PI)

ctx.clip()

ctx.drawImage(

tempFiles.header,

wWith * 0.05,

wHeight * 0.815,

wWith * 0.155,

wWith * 0.155)

ctx.restore()

ctx.draw(true)



当使用ctx.draw(true)  的时候ios不能裁切,显示方图


ctx.draw()可以裁切,但是会把原来的画图都会清掉


最后一次编辑于  2017-10-24
回答关注问题邀请回答
收藏

6 个回答

  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2017-10-27

    我用最新版微信没能重现

    2017-10-27
    赞同
    回复
  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2017-10-27

    你好,请提供一下完整的复现代码示例。

    2017-10-27
    赞同
    回复
  • 打豆豆
    打豆豆
    2017-11-28

    var app = getApp();

    var ringChart = null;

    Page({

    data: {

    canvasWidth: wx.getSystemInfoSync().windowWidth,

    },

    onReady: function (e) {

    const ctx = wx.createCanvasContext('myCanvas')

    var that = this

    var wHeight = wx.getSystemInfoSync().windowWidth * 1.778

    var wWith = wx.getSystemInfoSync().windowWidth


    //that.downloadAllFile(function (tempFiles) {

    ctx.drawImage(

    "../../imgs/bg.png",

    0, 0, wWith, wHeight)


    ctx.draw(true)


    ctx.save()

    ctx.beginPath()

    ctx.rect(wWith * 0.14, wHeight * 0.25, wWith * 0.72, wWith * 0.72)

    ctx.clip()

    ctx.drawImage(

    "../../imgs/1.png",

    wWith * 0.14, wHeight * 0.25,

    wWith * 0.72,

    ((wWith * 0.72) / 750) * 1334

    )

    ctx.restore()

    ctx.draw(true)


    ctx.setFontSize(14)

    ctx.setFillStyle('#888888')

    ctx.fillText(new Date(),

    wWith * 0.14,

    wHeight * 0.69

    )

    ctx.draw(true)



    ctx.setFontSize(18)

    ctx.setFillStyle('#222222')

    ctx.fillText("ttttttt",

    wWith * 0.24,

    wHeight * 0.875

    )

    ctx.draw(true)


    ctx.setFontSize(14)

    ctx.setFillStyle('#666666')

    ctx.fillText('邀请你一起来围观' + "title",

    wWith * 0.25,

    wHeight * 0.92)

    ctx.draw(true)

    ctx.fillText('长按二维码,评论起来!',

    wWith * 0.25,

    wHeight * 0.96)


    ctx.draw(true)


    ctx.save()

    ctx.beginPath()

    ctx.arc(wWith * 0.129,

    wHeight * 0.858,

    wWith * 0.075, 0, 2 * Math.PI)

    ctx.clip()

    ctx.drawImage(

    "../../imgs/2.png",

    wWith * 0.05,

    wHeight * 0.815,

    wWith * 0.155,

    wWith * 0.155)

    ctx.restore()

    ctx.draw(true)

    }

    });


    2017-11-28
    赞同
    回复
  • 打豆豆
    打豆豆
    2017-11-28


    这个为安卓截图

    2017-11-28
    赞同
    回复
  • 打豆豆
    打豆豆
    2017-11-28


    ios 切图 ios 11.0.3 微信版本6.5.20

    2017-11-28
    赞同
    回复
  • 打豆豆
    打豆豆
    2017-11-28

    左下角这个是模拟器上的圆图

    2017-11-28
    赞同
    回复