Question

我已经观看了一系列教程，目前我正在努力削减最右边的部分，但只能直线切入。不是我不知道如何在这件作品上切割剩余的倾斜线。我该怎么做呢？

<body>
<canvas id="NewCanvas" height="800" width="800">
</canvas>

</body>

和javascript

var can=document.getElementById("NewCanvas");
    var Jctx=can.getContext("2d");
    var img = new Image();

    img.onload = function() {
    Jctx.drawImage(img,150,10);
    //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

    Jctx.drawImage(img,150, 45, 150, 100, 100, 300, 150, 100);
    }
    img.src='http://images.sodahead.com/polls/004087283/3238285773_0912_holiday_pie_slicespreview_answer_103_xlarge.jpeg';

Answer 1

在新画布上使用剪辑方法仅剪切原始部分。

例如

// ctx is the new canvas
ctx.save(); // save the current state
ctx.moveTo(0,0);
ctx.lineTo(150,0);
ctx.lineTo(75,150);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0); // new image is clipped
ctx.restore(); // revert to old state and removes the clip.

切割倾斜线帆布/ Javascript？

1 个答案: