使用Javascript和画布从图像中移动像素

我对从画布上绘制的图像中移动一个像素（最终全部）感兴趣。这是我正在编写的示例代码，我相信它在绘制图像方面做了一些非常标准的工作：

    var images = [ // predefined array of used images
        'http://distilleryimage6.instagram.com/928c49ec07d411e19896123138142014_7.jpg'
    ];
    var iActiveImage = 0;

    $(function(){

        // drawing active image
        var image = new Image();
        image.onload = function () {
            ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
        }
        image.src = images[iActiveImage];

        // creating canvas object
        canvas = document.getElementById('panel');
        ctx = canvas.getContext('2d');

        console.log(ctx);

        var imageData = ctx.getImageData(200, 150, 1, 1);
        var pixel = imageData.data;

    });

所以我有这个，但是有人能给我指出正确的方向吗，比如从图像中随机选取一个像素，然后在页面上的其他地方移动它？这可能吗

---

谢谢

我认为本教程可能会帮助您：

---

我不确定“物理移动它”是什么意思，但您可以使用

ctx.putImageData（）

将像素应用到画布内的其他位置

var imageData = ctx.getImageData(200, 150, 1, 1);
var pixel = imageData.data;

// You can even get or set the color or alpha of the pixel. (values between 0-255)
var r = pixel[0];
var g = pixel[1];
var b = pixel[2];
var a = pixel[3];

ctx.putImageData(imageData, x, y);  // Where x y are the new coordinates.

另外，您应该将所有这些

imageData

操作放在

onload

函数中，因为在您的示例中，调用

ctx.getImageData（）

时图像仍然没有加载，所以您在操作空白像素

还请注意，出于安全原因，您不能对从其他域加载的图像使用

getImageData（）

。因此，我认为您的示例将引发类型为

未捕获错误：SECURITY\u ERR:DOM exception 18

的异常，因为图像是从Instagram加载的。

所说的“页面上的其他地方”是指画布外还是仍在同一画布内？