javascript - 切割倾斜线 Canvas /Javascript?

标签 javascript canvas

我看过很多教程,目前正在尝试将右上角的部分切掉,但只能沿直线切。不是,我一直想知道如何切割这件作品上剩余的倾斜线。我该怎么做呢?

这就是我正在谈论的行:/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/

相关文章:

javascript - 根据计数打破 Object.keys 循环

javascript - 如何使用reactJS 创建过滤搜索表。尝试让我的搜索栏过滤表中的信息

javascript - 如何让 div 以最紧凑的方式垂直对齐?

javascript - 当我使用弧度将半圆分成四个部分时,看起来我没有得到一条直线

javascript - 轻松纺车

html - Swiffy 转换错误(Flash 到 HTML5)

javascript - 路线调度从未呈现。您是否忘记在 onBeforeAction 中调用 this.next() ?

javascript - 如何在不使用innerHTML的情况下将图像元素添加到javascript中的div?

python - 带网格的 tkinter Canvas 滚动条?

javascript - CreateJS - 缩放 Canvas 不会缩放鼠标坐标