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

2015-08-30 04:29:40 179 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

WPF中GDI+图形图像的绘制：（三）绘制图像——实现黑白、浮雕、锐化效果接下来介绍GDI+绘制图像的方法，这次主要实现的功能是图片黑白、浮雕、锐化的效果，效果图： 1、接着之前绘制字体的工程，首先在Canvas里再添加一个Image控件用来绘制图片； <Canvas x:Name="mainCanvas" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Background="White" W... 阅读详情

问题我用问号标注出来了，先谢谢大家了
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);

		};