html5中的画布孔，图像不起作用

Question

我想在画布上创建一个洞;然后在画布中加载图像。

我希望这个画布在顶层包含一个洞。

我刚刚阅读了逆时针画布规则，然后创建了一个逆时针位置的孔，如下所示 -

  var c = document.getElementById("canvas-front");
        var ctx = c.getContext("2d");
        var centerX = c.width / 2;
        var centerY = c.offsetTop;
        var radius = 30;
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI,true);//boolean true to counter-clockwise
        ctx.fillStyle = 'black';
        ctx.fill();

我有画布之前的画布 -

在此画布中应用图片后

帆布 -

                    <canvas id="canvas-front" width="261" height="506"></canvas>

正如你从两张图片中看到的那样，我无法在画布上找到这个洞。

如何创建此弧以使图像不与此重叠。

Answer 1

我解决了这个问题 -

我必须做什么 -

在更改文件时，我对画布执行了空白并重新绘制了图像，然后在加载图像时 弧被创建为逆时针位置 -

在图像更改时再次绘制画布 -

   var canvas = document.getElementById("canvas-front");
                        canvas.width = canvas.width;//blanks the canvas
                        var c = canvas.getContext("2d");

创建图片并从更改的输入中提供所需的src -

 var img = new Image();
    img.src = e.target.result;

加载图片并平行创建弧 -

   img.onload = function () {
   c.drawImage(img, 0, 0);
   var centerX = canvas.width / 2;
   var centerY = canvas.offsetTop;
   var radius = 30;
   c.beginPath();
   c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
   c.fillStyle = 'black';
   c.fill();
   }