在 HTML Canvas 中的图像顶部绘制圆/弧

Question

我有一个简单的画布，背景是一个矩形，底部有一个图像，我正在尝试绘制一个圆圈，该圆圈的一部分与图像重叠。我有点卡在globalCompositeOperation使用哪个圆弧/圆出现在画布上图像的顶部。代码：   var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      var centerX = canvas.width / 2;      var centerY = canvas.height / 2;      var radius = 70;      context.fillStyle = "#29BEF1";      context.fillRect(0, 0, 800, 131);       var img = new Image;       img.src = 'https://i.imgur.com/aN26XpH.png';       img.onload = function() {          context.drawImage(img, 0, 29)      }       context.beginPath();      context.arc(800, -29, 87, 0, 2 * Math.PI);      context.closePath();      context.fillStyle = '#FEDB62';      context.fill();      body {        margin: 0px;        padding: 0px;      }    <canvas id="myCanvas" width="800" height="131"></canvas>

Answer 1

问题是由于加载图像是异步的，一旦加载并绘制它就会与已经绘制的图像重叠。

一个解决方案是将绘制太阳的代码移动到onload回调中。

img.onload = function() {

  // draw image

  context.drawImage(img, 0, 29)

  // draw sun

  context.beginPath();

  context.arc(800, -29, 87, 0, 2 * Math.PI);

  context.closePath();

  context.fillStyle = '#FEDB62';

  context.fill();

}