[]putimagedata 不起作用

(function()
{
var Sprite = Laya.Sprite;
var Stage = Laya.Stage;
var Texture = Laya.Texture;
var Browser = Laya.Browser;
var Handler = Laya.Handler;
var WebGL = Laya.WebGL;

(function()
{
// 不支持WebGL时自动切换至Canvas
Laya.init(Browser.clientWidth, Browser.clientHeight);

Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.alignH = Stage.ALIGN_CENTER;

Laya.stage.scaleMode = "showall";
Laya.stage.bgColor = "#232628";

showApe();
})();
function distort (imageData) {
console.log(imageData)
var data = imageData.data,
copy = Array.prototype.slice.apply(data, [0]),
w = imageData.width,
h = imageData.height,
i = 0,
l = data.length,
x, y, d
for (i; i < l; i += 4) {
if (data[i]!== 0) {
console.log(data[i])
}
x = i / 4 % w
y = Math.ceil(i / 4 / w) - 1
d = Math.ceil(20 * Math.sin(0.071 * y))
if (x + d <= 0 || x + d > w) {
data[i + 3] = 0
} else {
data[i] = copy[i + d * 4]
data[i + 1] = copy[i + 1 + d * 4]
data[i + 2] = copy[i + 2 + d * 4]
}
}
Laya.Browser.context.putImageData(imageData, 0, 0, 0, 0, 400, 400)

}

function showApe()
{
// 方法1:使用loadImage
var ape = new Sprite();
Laya.stage.addChild(ape);
ape.loadImage("../../res/apes/monkey3.png");

// 方法2:使用drawTexture
Laya.loader.load("../../res/apes/monkey2.png", Handler.create(this, function()
{
var t = Laya.loader.getRes("../../res/apes/monkey2.png");
var ape = new Sprite();
ape.graphics.drawTexture(t, 0, 0);
Laya.stage.addChild(ape);
ape.pos(200, 0);
data = Laya.Browser.context.getImageData(0, 0, 400, 400)
distort(data)
}));
}
})();[/i][/i][/i]
已邀请:

kezhiyu

赞同来自:

放到官方的引擎实例运行

kezhiyu

赞同来自:

而且 用Laya.Browser.context 在 不是webgl 的情况下 获取的是空的。不知道我发动这个行为的时候 是不是时机不对, 全部数据都是 0 ,但是,再次获取canvas = docuemt.getElementById('canvas') 然后再获取ctx 再获取 imagedata  就有 不为0 的数据,可是 putimagedata 并没有在canvas绘制出图案来
 
 我在 W3SCHOOL是里面运行是可以的

 

ymsdandan

赞同来自:

提供个demo吧
 

要回复问题请先

商务合作
商务合作