切割斜線帆布/ Javascript？

我看過一堆教程，目前正在嘗試將右上角的部分剪掉，但只能剪成一條直線。不是我堅持不知道我會如何去削減這塊剩餘的傾斜線。我會怎麼做呢？切割斜線帆布/ Javascript？

<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';

來源

2015-11-25 Göran Kempe

使用夾子的新畫布上的方法來削減只有原來的一部分。

如

// 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.

來源

2015-11-25 13:16:29 Blindman67

這似乎是一個很好的答案，但我很新的這一點，我不知道如何將它添加到我的代碼。你有什麼辦法可以把它放在小提琴裏嗎？這真的會幫助我很多。 –

只需將它放在你的'img.onload'函數中，替換你的'Jctx.drawImage'調用並用'Jctx'替換'ctx'。你將不得不鍛鍊座標 – Blindman67

如果這是困擾你，我很抱歉，但我真的不能掌握我應該做的事情。我試着用'img.onload = function'改變我的'Jctx.drawImage'。這使我的照片消失。 –

切割斜線帆布/ Javascript？

回答

相關問題