使用 source-in 剪辑图像内部的图像

context.globalCompositeOperation = "source-in";

source-in 合成剪辑现有形状内的新图纸。

注意:新图形的任何超出现有图形的部分都将被删除。

context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in';  // picture clipped inside oval
context.drawImage(picture,0,0);

StackOverflow 文档