- 小程序
以下是一个示例代码，演示如何在微信小程序中使用绘制网络图片并将其变成圆形：
Page({
onReady: function () {
const context = wx.createCanvasContext('myCanvas')
wx.getImageInfo({
src: 'image-url',
success: function (res) {
const imageWidth = res.width
const imageHeight = res.height
const canvasWidth = 200 // 绘制到 canvas 上的图片宽度
const canvasHeight = 200 // 绘制到 canvas 上的图片高度
const x = canvasWidth / 2 // 圆心横坐标
const y = canvasHeight / 2 // 圆心纵坐标
const radius = canvasWidth / 2 // 圆的半径
// 绘制圆形
context.beginPath()
context.arc(x, y, radius, 0, 2 * Math.PI)
context.closePath()
context.clip()
// 绘制图片
const dx = canvasWidth / 2 - imageWidth / 2 // 图片在 canvas 中的横坐标
const dy = canvasHeight / 2 - imageHeight / 2 // 图片在 canvas 中的纵坐标
context.drawImage(res.path, dx, dy, imageWidth, imageHeight)
context.draw()
}
})
}
})在上述代码中，我们在 onReady 方法中创建了一个 canvas 上下文，并通过 getImageInfo 获取了网络图片的宽度和高度。然后，我们定义了绘制到 canvas 上的图片宽度和高度，并计算出圆心坐标和圆的半径。接下来，我们使用 context.beginPath() 和 context.arc() 绘制一个圆形路径，并使用 context.closePath() 闭合路径。然后，使用 context.clip() 方法将绘制限制在圆形区域内。最后，使用 context.drawImage() 绘制网络图片，并将其放置在圆形区域内。最后，使用 context.draw() 方法将绘制内容渲染到 canvas 上。
请注意，上述示例中的 image-url 是占位符，你需要将其替换为实际的图片 URL 地址。同时，可以根据需要调整代码中的画布宽高、圆的半径等数值。
