在 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() {&nbsp; // draw image&nbsp; context.drawImage(img, 0, 29)&nbsp; // draw sun&nbsp; context.beginPath();&nbsp; context.arc(800, -29, 87, 0, 2 * Math.PI);&nbsp; context.closePath();&nbsp; context.fillStyle = '#FEDB62';&nbsp; context.fill();}