Javascript 图像中不规则形状的切割
我正在尝试使用canvas clip()方法将图像切割成特定形状 我已按照以下步骤进行操作:Javascript 图像中不规则形状的切割,javascript,drawing,shape,html5-canvas,Javascript,Drawing,Shape,Html5 Canvas,我正在尝试使用canvas clip()方法将图像切割成特定形状 我已按照以下步骤进行操作: 画一个矩形 在每边画半圆。右半圆和下半圆向外突出,左半圆和上半圆向内突出 下面提供了代码片段: var canvasNode = this.hasNode(); var ctx = canvasNode && canvasNode.getContext('2d'); var image = new Image(); image.onload = function() { ctx.d
var canvasNode = this.hasNode();
var ctx = canvasNode && canvasNode.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0, 512, 384);
};
image.src = "images/image.png";
var startX = 200;
var startY = 0;
var rectWidth = 150;
var rectHeight = 150;
var radius = 30;
//Main Rect
ctx.rect(startX, startY, rectWidth, rectHeight);
//Right arc
ctx.moveTo(startX+=rectWidth, startY+=(rectHeight/2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);
//Left arc
ctx.moveTo(startX-=(rectWidth / 2), startY+=(rectHeight / 2));
ctx.arc(startX, startY, radius, 0, Math.PI, true);
ctx.moveTo(startX-=(rectWidth / 2), startY-=(rectWidth / 2));
ctx.arc(startX, startY, radius, 3 * Math.PI / 2, Math.PI / 2, false);
ctx.clip();
我使用的图像大小为800x600(png)。请帮助我理解我在这里做错了什么。首先,你为什么要使用
clip
?您当前只是在绘制半圆,而不使用剪辑
第二,您正在创建路径和剪裁,但从未对路径进行笔划。因此,您将无法在屏幕上看到任何内容
如果您只是笔划而不是剪辑,它对我部分有效:。但是,您没有包括顶部的半圆
编辑:您似乎没有使用最佳的剪辑方式。您可以绘制一个矩形,但这也包括半圆中的一条线。如果你像这样画每条线/弧,你会过得更好
主要思想是从一点移动到另一点,如图所示:
因此,首先从(startX,startY)
开始,然后是一条线到(startX+线宽,startY)
,然后是一条弧到(startX+rectWidth/2,startY)
从pi
到0
(逆时针),等等
如果在绘制图像后也要绘制路径,最好再次松开。否则,笔划的质量将不高
var canvasNode = document.getElementById('cv');
var ctx = canvasNode && canvasNode.getContext('2d');
var image = new Image();
image.onload = function() {
// draw the image, region has been clipped
ctx.drawImage(image, startX, startY);
// restore so that a stroke is not affected by clip
// (restore removes the clipping because we saved the path without clip below)
ctx.restore();
ctx.stroke();
};
image.src = "http://www.lorempixum.com/200/200/";
var startX = 200;
var startY = 0;
var rectWidth = 150;
var rectHeight = 150;
var radius = 30;
var lineWidth = rectWidth / 2 - radius;
var lineHeight = rectHeight / 2 - radius;
// typing pi is easier than Math.PI each time
var pi = Math.PI;
ctx.moveTo(startX, startY);
ctx.lineTo(startX + lineWidth, startY);
ctx.arc(startX + rectWidth / 2, startY,
radius,
pi, 0, true);
ctx.lineTo(startX + rectWidth, startY);
ctx.lineTo(startX + rectWidth, startY + lineHeight);
ctx.arc(startX + rectWidth, startY + rectHeight / 2,
radius,
-pi / 2, pi / 2, false);
ctx.lineTo(startX + rectWidth, startY + rectHeight);
ctx.lineTo(startX + rectWidth - lineWidth, startY + rectHeight);
ctx.arc(startX + rectWidth / 2, startY + rectHeight,
radius,
0, pi, false);
ctx.lineTo(startX, startY + rectHeight);
ctx.lineTo(startX, startY + rectHeight - lineHeight);
ctx.arc(startX, startY + rectHeight / 2,
radius,
pi/2, pi*3/2, true);
ctx.lineTo(startX, startY);
ctx.save(); // Save the current state without clip
ctx.clip();
谢谢你的回复。我正在尝试将图像剪切成特定的形状。很抱歉,错过了顶弧代码,下面是绘制顶弧的修改片段,我不知道如何在JSFIDLE中包含图像:(因此图像不存在。当我应用剪辑时,图像中的左弧和上弧不会被剪切。我试图剪切的这条路径是拼图的一部分。我正在生成一个模式,以便可以复制它们。@quad_damage:我明白你的意思。我没有注意到你正在绘制的图像…对此表示抱歉。@quad_damage:可以吗在那种情况下,请投票/接受这个答案?