我看过很多教程,目前正在尝试将右上角的部分切掉,但只能沿直线切。不是,我一直想知道如何切割这件作品上剩余的倾斜线。我该怎么做呢?
这就是我正在谈论的行:/image/yliFm.jpg
fiddle :http://jsfiddle.net/8b1a64pm/2/
<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';
最佳答案
在新 Canvas 上使用clip方法,只剪掉原 Canvas 的一部分。
例如
// 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 - 切割倾斜线 Canvas /Javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33916942/