我有一个简单的画布，其背景为矩形，底部为图像，我试图绘制一个圆圈，其中一部分与图像重叠。我在使用时有点卡住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>造成此问题的原因是，加载图像是异步的，然后加载并绘制图像后，它就会与已绘制的图像重叠。
一种解决方案是将吸引阳光的代码移到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();
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句