如何将图像加载到画布中？

Question

我有一块带有蓝色圆圈的画布。 我想显示我想要加载的图像。我怎样才能更正确地实现这一点？

 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()
  }

测试链接img

Answer 1

您实际上可以在画布上绘制任何图像。但如果你的情况是一个非常简单的形状，比如球体，那么我会用另一种方式来做。

let image = new Image();
image.src = "path";
image.onload = () => ctx.drawImage(base_image, 0, 0);