Javascript 画布剪辑圆形图像

我只是想把图像剪成曲线。。但这不会发生。。 仅显示图像，但不显示剪辑

HTML

<canvas id="leaf" width="500" height="500" style='left: 0; 
position: absolute; top: 0;'></canvas>

---

您必须移动行

context.save（）中的所有内容

to

context.clip（）在
imgObj
的
onload
处理程序的函数对象内：

imageObj.onload = function()
{
    context.save();
    context.beginPath();
    context.moveTo(188, 150);
    context.quadraticCurveTo(288, 0, 388, 150);
    context.lineWidth = 10;
    context.quadraticCurveTo(288, 288, 188, 150);
    context.lineWidth = 10;
    context.clip();
    context.drawImage(imageObj, 10, 50);
};

请参阅，以获取示例。
当脚本启动后不久，图像被加载时，您将无法再使用剪裁过的画布，因为您已在以后将其还原。

您需要执行drawClipped函数，并在onload函数中调用它，例如：

function drawClipped(context, myImage) = {
   context.save();
   context.beginPath();
   context.moveTo(188, 150);
   context.quadraticCurveTo(288, 0, 388, 150);
   context.lineWidth = 10;
   context.quadraticCurveTo(288, 288, 188, 150);
   context.lineWidth = 10;
   context.clip();
   context.drawImage(myImage, 10, 50);
   context.restore();
};

var imageObj = new Image();
imageObj.onload = function()  {
    drawClipped(context, imageObj);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

function drawClipped(context, myImage) = {
   context.save();
   context.beginPath();
   context.moveTo(188, 150);
   context.quadraticCurveTo(288, 0, 388, 150);
   context.lineWidth = 10;
   context.quadraticCurveTo(288, 288, 188, 150);
   context.lineWidth = 10;
   context.clip();
   context.drawImage(myImage, 10, 50);
   context.restore();
};

var imageObj = new Image();
imageObj.onload = function()  {
    drawClipped(context, imageObj);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';