Question

我正在尝试获取源画布的内容，剪辑它，然后在另一个画布上绘制它。即使我的代码使用src PNG / new Image（）组合就像一个魅力，但当源内容来自另一个画布时，它不会。

代码是：

var imgData = src_ctx.getImageData(x, y, w, h);
dest_ctx.putImageData(imgData, x, y+h);

ctx.beginPath(); // Filled triangle
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x2,0);
ctx.lineTo(x1,0);               
ctx.clip();

Answer 1

定义剪裁区域后，使用drawImage绘制源画布，而不是设置图像数据。

dest_ctx.beginPath(); // Filled triangle
dest_ctx.moveTo(x1,y1);
dest_ctx.lineTo(x2,y2);
dest_ctx.lineTo(x2,0);
dest_ctx.lineTo(x1,0);               
dest_ctx.clip();

// You can control wich region to draw using all the arguments
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
dest_ctx.drawImage (srcCanvas, x, y);

Answer 2

getImageData是一个几乎无用的函数，除非你知道你正在做什么（即检查命中检测，过滤像素），但即便如此，它也很慢。

我为你制作了一个JSfiddle example（看看我在那里做了什么！）

代码的核心如下：

1  canvas = document.getElementById('canvas');
2  ctx = canvas.getContext("2d");
3  _canvas=document.createElement('canvas');
4  _ctx = _canvas.getContext("2d");
5  _canvas.width = 200;
6  _canvas.height = 200;
7
8  _ctx.beginPath();
9  _ctx.arc(100, 100, 100,0,Math.PI*2,true);
10 _ctx.clip();
11 _ctx.drawImage(img1, 0, 0);
12        
13 ctx.drawImage(_canvas, 1.25 * i * _canvas.width, 500);

基本上你正在做的是剪切到缓存画布（_canvas，第10行和第11行）并将其绘制到主画布（canvas，第13行）。

注意：理想情况下，您会翻译图像，使其位于剪辑的中心，但我仍然无法理解翻译，特别是与其他转换（如剪辑）结合使用时。

如何剪切从getImageData（）函数获取的图像？

2 个答案: