如何正确实现将图片加载到Canvas中替换现有蓝色圆形？

我当前有一段绘制蓝色圆形的Canvas代码，希望把这个蓝色圆形替换成指定图片显示，请问该怎么正确实现？

原代码：

const canvas = document.createElement("canvas")
const radius = 24
canvas.width = radius * 2
canvas.height = canvas.width
const context = canvas.getContext("2d")
if (context) {
  context.beginPath()
  context.arc(radius, radius, radius, -Math.PI, Math.PI / 2)
  context.lineTo(0, radius * 2)
  context.closePath()
  context.clip()
  context.fillStyle = "white"
  context.fillRect(0, 0, canvas.width, canvas.height)
  context.beginPath()
  context.arc(radius, radius, radius * 0.75, 0, Math.PI * 2)
  context.clip()
  context.fillStyle = "#0066FF"
  context.fillRect(0, 0, canvas.width, canvas.height)
  context.beginPath()
  context.font = "18px Inter"
  context.fillStyle = "white"
  context.fillText(size, 18, radius + 6)
  context.clip()
}

实现步骤与修改后的代码 #

要替换成指定图片，核心是保留原有的裁剪路径（维持原有形状），然后用图片填充这个区域，同时处理图片的异步加载问题：

1. 保留Canvas基础尺寸设置和外层裁剪路径，确保图片显示形状和原圆形一致
2. 创建Image对象加载目标图片，在图片加载完成后再绘制到Canvas上
3. 移除原有的蓝色填充和文字绘制逻辑，替换为图片绘制

修改后的完整代码：

const canvas = document.createElement("canvas")
const radius = 24
canvas.width = radius * 2
canvas.height = canvas.width
const context = canvas.getContext("2d")
const imgUrl = "https://cdn-icons-png.flaticon.com/512/1160/1160358.png" // 测试图片地址

if (context) {
  // 保留原有的外层裁剪路径，维持显示形状
  context.beginPath()
  context.arc(radius, radius, radius, -Math.PI, Math.PI / 2)
  context.lineTo(0, radius * 2)
  context.closePath()
  context.clip()
  
  // 填充白色背景，和原逻辑一致
  context.fillStyle = "white"
  context.fillRect(0, 0, canvas.width, canvas.height)
  
  // 创建图片对象并加载
  const img = new Image()
  img.crossOrigin = "anonymous" // 处理跨域图片加载问题
  img.onload = function() {
    // 绘制内层裁剪路径，限制图片显示范围
    context.beginPath()
    context.arc(radius, radius, radius * 0.75, 0, Math.PI * 2)
    context.clip()
    
    // 将图片绘制到Canvas，填满裁剪区域
    context.drawImage(img, 0, 0, canvas.width, canvas.height)
  }
  img.src = imgUrl
}

关键说明 #

• 裁剪路径保留：原代码的两层裁剪路径决定了显示形状，保留它们可以让图片按照原有的异形区域显示
• 图片异步加载：必须在onload事件触发后再绘制图片，否则图片未加载完成会导致绘制失败
• 跨域处理：如果图片来自外部域名，需要设置img.crossOrigin = "anonymous"，同时确保图片服务器支持跨域访问

内容的提问来源于stack exchange，提问作者Irin