wxml代碼：
<view class="result-page">
<canvas canvas-id='firstCanvas' style='width:100%;height:500px;margin: 0;padding: 0;display: block;background-color:#eeeeee'></canvas>
<view class='footer'>
<view class='btn-layout'>
<button class='btn-pierced btn-width' bindtap="returnIndex">換個名字測</button>
</view>
<view class='btn-layout'>
<button class='btn btn-layout btn-width' bindtap="saveImage">保存圖片</button>
</view>
</view>
</view>
js代碼：
var contex = wx.createCanvasContext('firstCanvas') var avatarurl_width = 100; //繪制的頭像寬度
var avatarurl_heigth = 100; //繪制的頭像高度
var avatarurl_x = 50; //繪制的頭像在畫布上的位置
var avatarurl_y = 50; //繪制的頭像在畫布上的位置
contex.save(); contex.beginPath(); //開始繪制
//先畫個圓 前兩個參數確定了圓心 （x,y） 坐標 第三個參數是圓的半徑 四參數是繪圖方向 默認是false，即順時針
contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); contex.clip();//畫好了圓 剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內 這也是我們要save上下文的原因
contex.drawImage('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2369419058,1797305489&fm=27&gp=0.jpg', avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推進去圖片，必須是https圖片
contex.restore(); //恢復之前保存的繪圖上下文 恢復之前保存的繪圖上下午即狀態 還可以繼續繪制
contex.draw(); //可將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中
原圖地址：
實現效果：
