用html浮雕效果图,【坑】【实例】【未解决】html5-canvas中实现图片的浮雕效

#canvas {

border: thin black solid;

}

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var image = new Image();

image.src = "48091305.jpg";

context.drawImage(image,0);

function show() {

var imagedata,data,length,width;

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

data = imagedata.data;

width = imagedata.width;

length = data.length;

for(var i = 0; i < length; i++) {

//判断是否处在最后一行

if(i <= length - width * 4) {

//跳过Alpha属性

if((i+1) % 4 !== 0) {

//判断是否在每行的最后一个像素，不清楚为什么要添加这个判断

if((i+4) % (width*4) == 0) {

data[i] = data[i-4];

data[i+1] = data[i-3];

data[i+2] = data[i-2];

data[i+3] = data[i-1];

i += 4;//?这里也不清楚，加没加好像也一样

} else {

//?请问这里为什么要这样写

data[i] = 255/2 + 2*data[i] - data[i+4] - data[i+width*4];

//在网上还有一种说法叫做

//基于当前像素的前一个像素RGB值与它的后一个像素的RGB值之差再加上128

//与本例中的又有什么区别呢?

}

}

} else {

//最后一行的情况

//跳过Alpha属性

if((i+1) % 4 !== 0) {

//当前像素等于他的上一行像素?为什么要这样写

data[i] = data[i-width*4];

}

}

}

context.putImageData(imagedata,0);

};