如何在画布的圆圈内添加图像？

Question

我想插入这张图片

var img=new Image();
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/desert1.jpg";

进入我正在用这个函数绘制的圆圈

function drawBall() {
    //ctx.globalCompositeOperation='destination-in';
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.drawImage(img,10,20);
    ctx.globalCompositeOperation='source-over';
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

这是画布当前的样子：

Answer 1

globalCompositeOperation 模式source-over 是默认的 gCO 模式，它会在现有模式的基础上绘制新内容。
您需要将其设置为destination-in在您在画布上绘制了一些东西之后，因此只有新像素和已绘制的像素会重叠的像素才会保留。

var img=new Image();
img.onload = drawBall;
img.src="https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg";

function drawBall() {
    var ctx = c.getContext('2d');
    c.width = this.width;
    c.height = this.height;
  
    // default gCO is source-over
    ctx.drawImage(img,-250,-200, img.width*.7, img.height*.7);
    // now we change the gCO
    ctx.globalCompositeOperation='destination-in';
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    // reset to default
    ctx.globalCompositeOperation='source-over';
    // closePath is useless here
    //ctx.closePath();
}

<canvas id="c"></canvas>