HTML 5：Canvas复制多边形内的像素数据

Question

下午好，

我是HTML 5中的Canvas新手并且使用它与Javascript一起使用。但我可以看到它真的有多强大，我需要帮助。我做了一个搜索，但找不到明确的答案。也许这里有人可以提供帮助。

我在Canvas上创建了一个背景图像。现在，我想要裁剪或复制包含在多边形数据中的图像的一部分，并将其放在屏幕上的其他位置。我知道如何创建背景图像。我知道如何在该图像上创建多边形，我知道如何将图像数据复制到屏幕的另一部分。

那么如何复制该多边形内的所有图像数据/像素？有一个简单的方法吗？在此先感谢您的帮助。非常感谢。

编辑： 这是我想要做的一个例子： http://jsfiddle.net/MFELx/

//I have no code, but it wouldn't let me post link. Hope this is allowed.

只有我在没有外部库或没有JQUERY的情况下尝试这样做。我希望这更有意义。再次感谢您的帮助！

再次编辑：解决方案：

好的，所以Mark E的解决方案奏效了。对于那些没有JQUERY感兴趣的人，我这样编辑了它：

HTML：     复制多边形     
    原始背景     

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);
}

Answer 1

由于您有要复制的多边形数据点，因此复制多边形的方法比使用第二个离屏画布更简单。

相反，你可以：

• 使用多边形点定义新多边形副本的路径。

• 使用context.clip()将所有新图纸限制在该多边形副本内。

• 使用画布作为自己的图像源，并使用等于新多边形距前一个多边形的距离的偏移量绘制它。

以下示例带注释的代码和演示：

＆＃13;

＆＃13;

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();

}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;