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

最新推荐文章于 2022-06-16 21:21:41 发布

_Slience_

最新推荐文章于 2022-06-16 21:21:41 发布

阅读量1.7w

点赞数

分类专栏： html5-canvas

本文链接：https://blog.csdn.net/u010513756/article/details/48108857

版权

html5-canvas 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在线演示

<!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="浮雕效果" οnclick="show()" />
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var image = new Image();
		image.src = "48091305.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);
		};
		
	</script>
</html>