Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
630 views
in Technique[技术] by (71.8m points)

微信小程序中如何在canvas画布上绘制圆形图片?

原生js中的canvas有多种方法可以绘制圆形图片,比如用clip方法
https://segmentfault.com/q/10...
但是小程序中封装的canvas方法比较少,没有clip方法,不知道有没有其他办法能够做到绘制圆形图片?
有知道的大大希望可以告知一下,谢谢啦


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

刚写过,希望可以帮到别人:

    //其他代码
    var that = this;
    var cover = that.data.cover
    var selectedSentences = that.data.selectedSentences;
    var sentences = that.data.sentences;

    const ctx = wx.createCanvasContext('myCanvas');

    //圆形切割-开始
    ctx.save();
    ctx.beginPath();
    ctx.arc(cover.height_r / 2, cover.height_r / 2, cover.height_r / 2, 0, Math.PI * 2, false);
    ctx.clip();
    //圆形切割-结束
    ctx.drawImage(cover.src, 0, 0, cover.width_r, cover.height_r);
    ctx.restore(); 
    //其他代码
    
    ctx.draw();
    
    ![图片描述][1]
    


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...