HTML 5：在多边形内复制像素数据的画布 [英] HTML 5: Canvas copying Pixel Data within a Polygon
问题描述
下午好，
我是新加入Canvas的HTML 5，并且使用Javascript。但我可以看到这真的是多么强大，我需要帮助。我做了一个搜索，找不到一个明确的答案。也许这里的某个人可以帮助。
I am new to Canvas in HTML 5 and in using it with Javascript. But I can see how powerful this really is and I needed help. I have done a search and could not find a clear answer to this. Perhaps someone here can help.
我在Canvas上创建了一个具有背景图片的上下文。现在，我想裁剪或复制包含在多边形数据中的图像的一部分，并将其放在屏幕上的其他位置。我知道如何创建背景图像。我知道如何在该图像上创建一个多边形，我知道如何将图像数据复制到屏幕的另一部分。
I have created a context on the Canvas with a background image in place. Now, I want crop or copy a part of that image which is contained in Polygon Data and place it else where on the screen. I know how to create the background image. I know how to create a polygon over that image and I know how to copy image data to another part of the screen.
那么，如何复制该多边形内的所有图像数据/像素？有一个简单的方法吗？感谢您的帮助。非常感谢。
So how would I copy all the image data/pixels within that polygon? Is there a simple way to this? Thanks in advance for your help. It is much appreciated.
编辑：
这是我想要做的一个例子：
http://jsfiddle.net/MFELx/
//I have no code, but it wouldn't let me post link. Hope this is allowed.
只有我试图做没有外部库或没有JQUERY。我希望这有一点更有意义。再次感谢您的帮助！
Only I am trying to do it without an external library or without JQUERY. I hope that makes a little more sense. Thanks for your help again!
重新编辑：解决方案：
OK Mark E的解决方案我为没有JQUERY感兴趣的人编辑它：
OK So Mark E's Solution worked. I edited it this way for those who are interested without JQUERY:
HTML：
复制多边形
原始背景
HTML:
Copy the polygon
Original background
CSS：
body{ background-color: ivory; }
#canvas{border:1px solid red;}
JS：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var polygonData=[];
polygonData.push({x:125,y:75});
polygonData.push({x:100,y:118});
polygonData.push({x:50,y:118});
polygonData.push({x:25,y:75});
polygonData.push({x:49,y:31});
polygonData.push({x:100,y:31});
polygonData.push({x:125,y:75});
var img=new Image();
img.onload=start;
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/stars1.png';
function start(){
// draw the original background
ctx.drawImage(img,0,0);
// copy the existing polygon to its new position
}
function copyPolygon(newStartingX,newStartingY){
// calculate the copy's offset versus the original
var dx=newStartingX-polygonData[0].x;
var dy=newStartingY-polygonData[0].y;
// define the path of the new polygon
ctx.beginPath();
ctx.moveTo(polygonData[0].x+dx,polygonData[0].y+dy);
for(var i=1;i<polygonData.length;i++){
ctx.lineTo(polygonData[i].x+dx,polygonData[i].y+dy);
}
ctx.closePath();
// clip to the path of the new polygon
ctx.save();
ctx.clip();
// use the clipping version of drawImage to
// redraw the existing canvas over the new polygon position
// Note: with clipping, new pixels will only be drawn in the new polygon
ctx.drawImage(canvas, 0,0,cw,ch, dx,dy,cw,ch);
// clean up -- un-clip by resetting the context state
ctx.restore();
}
function myFunction() {
copyPolygon(250,75);
}
推荐答案
要复制的点，有一个更简单的方法来复制多边形，而不是使用第二个离屏画布。
Since you have the polygon data points that you want to copy, there's a simpler method to copy your polygon than using a second off-screen canvas.
您可以：
-
使用多边形点
Use the polygon points to define the path of the new polygon copy.
使用 context.clip（）限制新的多边形副本的路径。
Use context.clip() to restrict all new drawings to be inside that polygon copy.
使用画布作为其自己的图像源，并绘制一个偏移量，等于新多边形距离
Use the canvas as its own image source and draw it with an offset equal to how far the new polygon is from the previous polygon.
以下是注释代码和演示示例：
Here's example annotated code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var polygonData=[];
polygonData.push({x:125,y:75});
polygonData.push({x:100,y:118});
polygonData.push({x:50,y:118});
polygonData.push({x:25,y:75});
polygonData.push({x:49,y:31});
polygonData.push({x:100,y:31});
polygonData.push({x:125,y:75});
var img=new Image();
img.onload=start;
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/stars1.png';
function start(){
// draw the original background
ctx.drawImage(img,0,0);
// copy the existing polygon to its new position
$('#copy').click(function(){
copyPolygon(250,75);
$('#status').text('With the polygon copied');
});
}
function copyPolygon(newStartingX,newStartingY){
// calculate the copy's offset versus the original
var dx=newStartingX-polygonData[0].x;
var dy=newStartingY-polygonData[0].y;
// define the path of the new polygon
ctx.beginPath();
ctx.moveTo(polygonData[0].x+dx,polygonData[0].y+dy);
for(var i=1;i<polygonData.length;i++){
ctx.lineTo(polygonData[i].x+dx,polygonData[i].y+dy);
}
ctx.closePath();
// clip to the path of the new polygon
ctx.save();
ctx.clip();
// use the clipping version of drawImage to
// redraw the existing canvas over the new polygon position
// Note: with clipping, new pixels will only be drawn in the new polygon
ctx.drawImage(canvas, 0,0,cw,ch, dx,dy,cw,ch);
// clean up -- un-clip by resetting the context state
ctx.restore();
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=copy>Copy the polygon</button>
<br>
<h4 id='status'>Original background</h4>
<canvas id="canvas" width=400 height=250></canvas>
这篇关于HTML 5：在多边形内复制像素数据的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
