常州微信小程序-Canvas绘制圆形图片

//获取设备的信息

let mobile = wx.getSystemInfoSync();

//获取设计图纸换算比例（用于自适应所有屏幕）

let ratio = mobile.windowWidth / 375;（375px为iphone6屏幕宽度）

const ctx = wx.createCanvasContext('myCanvas')

//常州手游开发图片宽度、高度

var arcWidth = 26 * ratio;

//x-轴坐标

var xCoor = 21 * ratio;

//y-轴坐标

var yCoor = 32 * ratio;

//需要将网络图片url 转为本地临时路径（res.tempFilePath为图片临时路径）

//微信定义：clip() 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。常州游戏开发培训可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

wx.downloadFile({

url: 'http://www.homeqin.cn/logo.png',

success: function(res) {

ctx.save()

ctx.beginPath()

ctx.arc(xCoor+arcWidth/2, yCoor+arcWidth/2, arcWidth/2, 0, Math.PI * 2, false);

ctx.clip()

ctx.drawImage(res.tempFilePath,xCoor, yCoor,arcWidth,arcWidth);

ctx.restore()

ctx.draw()

}

})