Question

让我解释一下我想要实现的目标..

我正在构建一些只是为了好玩的东西，以及一个类似于

的学习实验

www.milliondollarhomepage.com

除此之外，我想使用canvas和/或Fabric.js来实现同样的目的。我如何处理画布中的每个像素？

场景：

我想提供一个1000像素的格斗。
用户可以选择图片以及它应该放在画布上的位置
可以根据用户想要的像素数量来调整图像大小，并从剩余的总像素中扣除。

对此有任何帮助将不胜感激！

Answer 1

用于处理单个像素的HTML5 canvas api中的方法是

context.getImageData(x,y,width,height);

例如

var map = context.getImageData(0,0,canvas.width,canvas.height);

这将返回一个包含重复顺序的大型数组：

[red,green,blue,alpha,red,green,blue,alpha...]

每个4数字代表所选区域上每个像素的红色，绿色，蓝色和Alpha通道，从左到右，从上到下。

每个数字的值都是0 - 255范围内的整数。

循环浏览每个像素并放弃其red和blue个频道，从而将图像调为绿色，例如

//assume map variable from earlier

for(var i = 0; i < map.data.length; i+=4){
    map.data[i] = 0; // drop red to 0
    map.data[i+2] = 0; // drop blue to 0
}
context.putImageData(map,0,0);

See Example

请注意，此过程只能在服务器上完成，而其他域中的图像不会“污染”画布。如果不满足这些要求，将抛出安全错误DOM异常。

如何操作画布中的像素？

1 个答案: