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

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模式，它在现有模式上绘制新内容。
您需要在之后将其设置为{/ 1}} 在画布上绘制了一些内容，因此只有新像素和已经绘制的像素重叠的像素才会保留。

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();
}