最近在使用canvas繪制用戶電子名片時(shí)，由于第一次使用不夠熟悉，在繪制名片時(shí)根據(jù)順序需要先裁剪出名片的形狀及邊角圓；
然后再在卡片區(qū)域中繪制頭像，由于頭像需要裁剪一個(gè)斜角線，于是需要使用到clip()進(jìn)行二次裁剪，裁剪后在安卓手機(jī)顯示一切正常，但在ios端測(cè)試時(shí)無法進(jìn)行有效封閉
|
解決思路：
網(wǎng)上找了很久也沒找到直接的有效解決方法，于是根據(jù)自己的思路新增了一個(gè)臨時(shí)的畫布，在將需要進(jìn)行二次裁剪的樣式先在臨時(shí)畫布上繪制后，再轉(zhuǎn)換成圖片，以圖片的形式再繪制到畫布中文章來源：http://www.zghlxwxcb.cn/news/detail-534785.html
代碼示例：文章來源地址http://www.zghlxwxcb.cn/news/detail-534785.html
<canvas canvas-id="CanvasImg"></canvas>
// 創(chuàng)建臨時(shí)畫布
createCanvasContext(){
const this_ = this
const context_img = wx.createCanvasContext('CanvasImg');
// 繪制用戶頭像
context_img.save();
// 開始創(chuàng)建一個(gè)路徑
context_img.beginPath()
// 畫一個(gè)圓形裁剪區(qū)域 寬、高
context_img.arc(170, 180, height, Math.PI / 1.7, Math.PI * 1.5)
// 關(guān)閉繪制路徑
context.closePath();
// 設(shè)置描邊顏色，transparent：透明
context.strokeStyle = "transparent";
context.stroke();
context_img.clip();
// 繪制圖片
context_img.drawImage(img_path, 0, 0, 170, 180);
context_img.restore();
// 繪制完成，保存畫布
context_img.draw()
// 臨時(shí)畫布圖像轉(zhuǎn)圖片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: imageSize.width,
height: imageSize.height,
canvasId: 'CanvasImg',
success: function(res) {
// 拿到繪制后的圖片
const avatarUrl = res.tempFilePath
this_.setData({avatarUrl})
}
});
}
到了這里，關(guān)于微信小程序 canvas畫布clip()在ios端多次裁剪無效的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
