onReady: function (e) {
var context = wx.createCanvasContext('畫布ID');//獲取畫布
context.save()//保存繪圖上下文
context.arc(圓心X座標, 圓心Y座標, 圓的半徑, 0, 2 * Math.PI)//繪製圓形
context.stroke()//這個一定要有,不然圖片不剪切,我就是遇到了這個問題
context.clip()//剪切
context.drawImage('圖片地址',X座標,Y座標,width,height)//置入圖片
context.restore()//恢復之前保存的繪圖上下文
}
小程序canvas剪切圓形頭像
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
移動應用的下一站 | InfoQ 大咖說
InfoQ 中文站
2021-08-28 11:59:04
投資上千萬,下載才幾千!移動應用開發的下一站在哪裏?
张雅文
2021-08-19 14:48:54
建信小程序開發工具鏈原理淺析
金科优源汇
2020-12-06 14:03:49
GraphQL 在酒店系統上的實踐
Qunar技术沙龙
2020-12-04 14:08:55
互聯網圓桌派技術沙龍專場——智能小程序 開發全解析
InfoQ 中文站
2020-12-02 21:44:11
一起建數據湖嗎?
apachekylin
2020-11-29 10:13:55
前端視角談物聯網三部曲:連接智能、交互智能、數據智能
云加社区
2020-11-21 10:03:52
Serverless Components 在騰訊雲的落地和實踐
云加社区
2020-11-19 10:03:54
他把閒魚APP長列表流暢度翻了倍
云从
2020-11-10 10:03:55
互聯網 輿情繫統的架構實踐
百分点认知智能实验室
2020-11-05 10:13:55
微信小程序登錄功能的前端設計與實現
云加社区
2020-11-02 10:03:52
iOS性能優化實踐:頭條抖音如何實現OOM崩潰率下降50%+
字节跳动技术团队
2020-10-29 14:03:50
持續演進的接口自動化測試方案
Henry
2020-10-29 10:08:48
日調 1000 億,騰訊微服務平臺的架構演進
刘智新
2020-10-16 10:03:58