HTML 5 : Canvas copying Pixel Data within a Polygon

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

由于您拥有要复制的多边形数据点，因此有一种比使用第二个屏幕外 Canvas 更简单的复制多边形的方法。

相反，您可以:

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

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

• 将 Canvas 用作其自己的图像源，并使用等于新多边形与先前多边形的距离的偏移量绘制它。

下面是带注释的示例代码和演示:

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>