Javascript 在HTML5画布中移动裁剪的图像

如何在画布内将裁剪图像向下移动100px，向左移动50px？包括JSIDLE链接

Javascript

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');



// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

// Save the state, so we can undo the clipping
ctx.save();


// Create a shape, of some sort
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 30);
ctx.lineTo(180, 10);
ctx.lineTo(200, 60);
ctx.arcTo(180, 70, 120, 0, 10);
ctx.lineTo(200, 180);
ctx.lineTo(100, 150);
ctx.lineTo(70, 180);
ctx.lineTo(20, 130);
ctx.lineTo(50, 70);
ctx.closePath();
// Clip to the current path
ctx.clip();


ctx.drawImage(img, 0, 0);

// Undo the clipping
ctx.restore();
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

html

JSFIDLE

---

首先，您应该在所需位置创建形状，这将是合适的解决方案

但是，在此阶段，您可以使用和方法来完成动作

//获取画布和绘图上下文
var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
//创建一个图像元素
var img=document.createElement（'img'）；
//加载图像后，绘制它
img.onload=函数（）{
//保存状态，以便我们可以撤消剪辑
ctx.save（）；
//创造一个形状，某种形式
ctx.beginPath（）；
ctx.moveTo（10,10）；
ctx.lineTo（100,30）；
ctx.lineTo（180,10）；
ctx.lineTo（200,60）；
ctx.arcTo（180,70,120,0,10）；
ctx.lineTo（200180）；
ctx.lineTo（100150）；
ctx.lineTo（70180）；
ctx.lineTo（20130）；
ctx.lineTo（50,70）；
ctx.closePath（）；
//剪辑到当前路径
ctx.clip（）；
ctx.drawImage（img，0,0）；
//撤消剪辑
ctx.restore（）；
移动（50100）；//向左移动：50px，向下移动：100px
}
//设置图像的交叉原点，因为它不位于本地服务器上
img.crossOrigin='匿名'；
//指定要加载映像的src
img.src=”http://i.imgur.com/gwlPu.jpg";
功能移动（左、下）{
var cropeImage=ctx.getImageData（0,02000）；
ctx.clearRect（0，0，canvas.width，canvas.height）；//清除画布
ctx.putImageData（裁剪图像，0+左，0+下）；
}

画布{
背景：CEF；
}

安全的画布剪切和粘贴 由于与

ctx.getImageData

和域外图像相关的跨源安全冲突，在许多情况下，给定的答案都会失败

直接复制粘贴 如果要将图像移动为方形区域或使其不与原始图像重叠，则可以直接从画布中进行复制

ctx.drawImage(ctx.canvas, 0, 0, 200, 200, 100, 100, 200, 200);

直接剪切粘贴 由于有些重叠需要清除，因此可以分两部分进行复制

// move bottom half
ctx.drawImage(ctx.canvas, 0, 100, 200, 100, 100, 200, 200, 100); 
// clear bottom half
ctx.clearRect(0, 100, 200, 100);
// move top half
ctx.drawImage(ctx.canvas, 0, 0, 200, 100, 100, 100, 200, 100); 
// lear top half
ctx.clearRect(0, 0, 200, 100);

但这仍然有点问题

一般剪贴 理想的解决方案是创建一个临时画布来保存图像，以便可以移动图像。它不会受到重叠的影响，如果画布被跨原点数据污染，它也不会失败

function cutFromCanvas(ctx, x, y, w, h){
    const cut = document.createElement("canvas");
    cut.width = w;
    cut.height = h;
    cut.getContext("2d").drawImage(ctx.canvas, -x, -y, w, h, 0, 0, w, h);
    ctx.clearRect(x, y, w, h);
    return cut;
}

然后在新的位置绘制图像

  ctx.drawImage(cutFromCanvas(ctx, 0, 0 200, 200), 100, 100);

---

正如@gaand所说，最好的方法是将剪辑形状移动到应该的位置。 使用

setTransform

，无需修改路径声明即可完成此操作

var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
var img=document.createElement（'img'）；
img.onload=函数（）{
//移动一切
setTransform（1,0,0,1100,100）；
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（10,10）；
ctx.lineTo（100,30）；
ctx.lineTo（180,10）；
ctx.lineTo（200,60）；
ctx.arcTo（180,70,120,0,10）；
ctx.lineTo（200180）；
ctx.lineTo（100150）；
ctx.lineTo（70180）；
ctx.lineTo（20130）；
ctx.lineTo（50,70）；
ctx.closePath（）；
ctx.clip（）；
ctx.drawImage（img，0,0）；
//恢复原始矩阵
setTransform（1,0,0,1100,100）；
//但它也在这里修复了。。。
ctx.restore（）；
};
img.src=”http://i.imgur.com/gwlPu.jpg";
画布{
背景：浅蓝色
}
当然，如何将裁剪对象向下移动100像素@ℊααnd
  ctx.drawImage(cutFromCanvas(ctx, 0, 0 200, 200), 100, 100);