在学习canvas中实现图片的浮雕效果时遇到的一点问题

_Slience_ 2015-08-30 04:29:40
问题我用问号标注出来了,先谢谢大家了
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#canvas {
border: thin black solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<input type="button" name="show" id="show" value="浮雕效果" onclick="show()" />
</body>

javascript部分
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "testImage.jpg";
context.drawImage(image, 0, 0);


function show() {
var imagedata, data, length, width;

imagedata = context.getImageData(0, 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, 0);
};
...全文
87 点赞 收藏 回复
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复

还没有回复,快来抢沙发~

发动态
发帖子
HTML5
创建于2012-11-23

3.7w+

社区成员

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
申请成为版主
社区公告
暂无公告