CSSASS三人行

(Three.js) 页面展现3D模型作者：ONEBOYS 发表时间： 2012年02月24号，星期五阅读：4,159 次

CSS3的3d-Transform，Canvas，SVG，WebGL等等技术的出现和发展，正将网页的3D化慢慢变得简单友好，但是3D建模毕竟有其很高的专业性，所以如果拥有一个内心强大，接口简洁的库就能使我们得心应手许多。Three.js便是备受推崇的一个，尽管API的变动，简陋的文档会让我们的上手比较困难。

下面我提供一个入门Demo，及一个用Three.js展示通用的3D模型格式的Demo。（注意：确保你使用的浏览器支持了Canvas，及WebGL。拥有一个先进的浏览器，将为你带来更好的上网体验。Test）

下面是入门Demo，加了注释。详细入门教程可以到这里Getting Started with Three.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>立方体</title>
    <script type="text/javascript" charset="utf-8" src="/blog/resource/threejs/three.js"></script>
	<style>body{overflow:hidden;}</style>
</head>
<body></body>
	<script>
	/* 场景 */
	var WIDTH = document.documentElement.offsetWidth || 800,
		HEIGHT = document.documentElement.clientHeight || 600;
	var scene = new THREE.Scene();
	/* 摄像头 */
	var VIEW_ANGLE = 75,
		ASPECT = WIDTH / HEIGHT,
		NEAR = 0.1,
		FAR = 10000;
	var	camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); /* 摄像机视角，视口长宽比，近切面，远切面 */
		camera.position.set(0, 0, 1000); //放置位置
		scene.add(camera);
	/* 显示对象 */
	var geometry = new THREE.CubeGeometry( 200, 200, 200 ), //几何属性。代码位于"\src\extras\geometries"
		material = new THREE.MeshLambertMaterial( { color: 0xcccccc} ); //材质属性 "\src\materials"
	var cube = new THREE.Mesh(geometry, material);
		cube.rotation.set(10,20,10); //放置角度
		scene.add(cube);
	/* 灯光 */
	var light = new THREE.DirectionalLight(0xFFFFFF); //直线光,"\src\lights"
		light.position.set(0, 0, 100).normalize();
		scene.add(light);
	/* 渲染器 */
	var	renderer = new THREE.CanvasRenderer(); //有Canvas，WebGL，SVG三种模式
		renderer.setSize(WIDTH , HEIGHT);
		document.body.appendChild(renderer.domElement);
	/* 动画 */
	(function anime(){
		cube.rotation.x += 0.01; //改变立方体角度
		renderer.render(scene, camera); //开始渲染
		return requestAnimationFrame(anime);
	})()
</script>
</html>

上面使用了Canvas模式渲染，因为考虑到Opera还不支持WebGL，WebGL的渲染模式要比Canvas快的要多的多。

下面是一个展示机器人MGA-411 Mangusa模型的Demo。
Three.js可以调用以Json格式存储模型信息的js文件来创建模型。模型你可以自己在3D软件上建模完成，或在网上下载。至于模型格式，你可以通过three.js提供的插件在Blender这款开源3D制作软件中将一些3D模型格式，如3ds，obj等，转换成符合three.js标准的js格式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MGA-411 Mangusa</title>
    <script type="text/javascript" charset="utf-8" src="/blog/resource/threejs/three.js"></script>
	<style>body{overflow:hidden;background:#000}</style>
</head>
<body>
	<div id="Loading" style="color:#fff">Loading...</div>
</body>
	<script>
	/* 场景 */
	var WIDTH = document.documentElement.offsetWidth || 800,
		HEIGHT = document.documentElement.clientHeight || 600;
	var scene = new THREE.Scene();
	/* 摄像头 */
	var VIEW_ANGLE = 75,
		ASPECT = WIDTH / HEIGHT,
		NEAR = 0.1,
		FAR = 10000;
	var	camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
		camera.position.set(0, 0, 1000);
		scene.add(camera);
	/* 渲染器 */
	var	renderer = new THREE.WebGLRenderer();
		renderer.setSize(WIDTH , HEIGHT);
		document.body.appendChild(renderer.domElement);
	/* 灯光 */
	var light = new THREE.DirectionalLight(0xFFFFFF);
		light.position.set(0, 0, 99).normalize();
		scene.add(light);
	/* 显示对象 */
	var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, wireframe: true }),
		obj;
	var loader = new THREE.JSONLoader(true);
    loader.load("/blog/resource/threejs/model/MGA.js", function ( geometry ) {
		var loading = document.getElementById("Loading");
		loading.parentNode.removeChild(loading);
		obj = new THREE.Mesh(geometry, material);
		obj.position.set(0,1,990);
		scene.add(obj);
		var start = new Date().getTime(),delta;
		(function anime(){
			delta = new Date().getTime() - start;
			obj.rotation.y =   delta / 1000;
			renderer.render(scene, camera);
			return requestAnimationFrame(anime);
		})();
	});
</script>
</html>

标签： 3D, blender, canvas, requestAnimationFrame, threejs, webgl
发布在 HTML5 | 没有评论 »

firefox10的3D Transform 作者：ONEBOYS 发表时间： 2012年02月1号，星期三阅读：698 次

之前写了一篇CSS3的崛起——体验webkit的3D-Effect。
随着firefox10正式版发布，firefox也支持3D Transform了，所以补充一篇，将上篇中的代码移植过来，支持firefox。

这里先穿插介绍下firefox10的新特性，firefox10除了支持3D Transform，还提供了Fullscreen API，令人兴奋吧。另外firefox10成为Mozila首个“长期支持版本”(Extended Support Release，简称“ESR”)，这种当然是市场考虑啦，至于是什么用意和市场反响我们就不探讨了。

下面是演示demo，只支持firefox10。 chrome浏览器的用户可以参考上一篇。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>firefox10</title>
<style>
*{padding:0;margin:0;}
body { background-color:#deddcd;}
#movieposters { list-style:none; margin:100px;}
#movieposters li {float:left;
	-moz-perspective: 500px;
}
/* 图片3d变换效果 */
#movieposters li img { border:10px solid #fcfafa;-moz-box-shadow:0 3px 10px #888;
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover img {-moz-transform: rotateY(0deg); }
/* 文字框3d变换效果 */
.movieinfo {border:10px solid #fcfafa; padding:0 10px; width:120px; height:100px; background-color:#deddcd; margin:-125px 0 0 55px; position:absolute;-moz-box-shadow:0 10px 20px #888;
	-moz-transform: translateZ(30px) rotateY(30deg);
	-moz-transition-property: -moz-transform, box-shadow, margin;
	-moz-transition-duration: 0.5s; }
#movieposters li:hover .movieinfo {-moz-box-shadow:0 5px 10px #888; margin:-105px 0 0 30px;
	-moz-transform: rotateY(0deg); }
.movieinfo h3 {color:#7a3f3a;font-family:Georgia; text-align:center; }
.movieinfo p {padding:10px 0;}
.movieinfo a { display:block; background:#7a3f3a; padding:3px 0; color:#eee; text-decoration:none; text-align:center; margin:0 auto;-moz-border-radius:5px; }
.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }
</style>
</head>
<body>
<ul id="movieposters">
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			<h3>Avatar 2</h3>
			<p>You like a baby</p>
			<a href="http://www.cssass.com" title="I see you">More info</a>
		</div>
	</li>
</ul>
</body>
</html>

去除一些效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>firefox10</title>
<style>
*{padding:0;margin:0;list-style:none; }
body { background:#deddcd;margin:100px;}
#movieposters li {float:left;
	-moz-perspective: 500px;
}
#movieposters li img {
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover img {
	-moz-transform: rotateY(0deg);
}
.movieinfo {
	position:absolute; width:120px; height:100px; background:#fff; margin:-125px 0 0 55px;
	-moz-transform: translateZ(30px) rotateY(30deg);
	-moz-transition-property: -moz-transform, margin;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover .movieinfo {
	margin:-105px 0 0 40px;
	-moz-transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul id="movieposters">
	<li>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			(未设置transform-style，默认为plat)
		</div>
	</li>
</ul>
</body>
</html>

使用preserve-3d，实现全方位3D

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>firefox10</title>
<style>
*{padding:0;margin:0;list-style:none; }
body { background:#deddcd;margin:100px;}
#movieposters{
	-moz-perspective: 1000px;
}
#movieposters li {float:left;
	-moz-animation: spin 10s infinite linear;
}
#movieposters li.first{
	-moz-transform-style: preserve-3d;
}
#movieposters li.second{
	-moz-transform-style: plat;
}
 @-moz-keyframes spin {
      from { -moz-transform: rotateY(0); }
      to   { -moz-transform: rotateY(360deg); }
    }
#movieposters li img {
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover img {
	-moz-transform: rotateY(0deg);
}
.movieinfo {
	position:absolute; width:120px; height:100px; background:#fff; margin:-125px 0 0 55px;
	-moz-transform: translateZ(30px) rotateY(30deg);
	-moz-transition-property: -moz-transform, margin;
	-moz-transition-duration: 0.5s;
}
#movieposters li:hover .movieinfo {
	margin:-105px 0 0 40px;
	-moz-transform: rotateY(0deg);
}
</style>
</head>
<body>
<ul id="movieposters">
	<li class='first'>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			Avatar 2 (preserve-3d)
		</div>
	</li>
	<li class='second'>
		<img src='http://www.cssass.com/blog/resource/avatar/avatar_m.jpg' width='200' />
		<div class="movieinfo">
			Avatar 2 (plat)
		</div>
	</li>
</ul>
</body>
</html>

最后说明一下firefox和webkit间使用的一点差别：
火狐10下的3D Transforms在设置perspective属性值时必须带单位px，webkit可以省略；
另外，webkit在用transition-property设置transform这个值时，可以不用前缀，而firefox需要写上-moz-transform;

标签： 3D, erspective, preserve-3d, transform
发布在 CSS3 | 没有评论 »

canvas的像素级操作——4.关注性能作者：ONEBOYS 发表时间： 2012年01月17号，星期二阅读：892 次

我们开篇就提过，canvas的像素级操作相对来说是很低效的。

我们试着写一个图片切割效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>效率相关</title>
</head>
<body>
<canvas id="board" width="100" height="110"></canvas>
<script type="text/javascript">
function splinter(ctx,imgPixels){
	var round = 0; //统计循环次数
	for(var y = 0; y < imgPixels.height; y++){
		for(var x = 0; x < imgPixels.width; x++){
			/* 虽然只调用了putImageData一个方法，但是操作的data非常多 */
			ctx.putImageData(imgPixels, x, y, x, y, 1 ,1); //后四个参数控制显示区域
			round ++ ;
		}
	}
	return round;
}
function demo(img){
	var w = img.width,
		h = img.height;
	var temp = document.createElement('canvas');
		temp.width = w;
		temp.height = h;
	var tempCtx = temp.getContext('2d');
		tempCtx.drawImage(img, 0, 0, w, h);
	var ctx = document.getElementById('board').getContext('2d');
	var imgPixels = tempCtx.getImageData(0, 0, w, h);
	return splinter(ctx,imgPixels);
}
(function(){
	var img = new Image();
		img.src = "/blog/resource/avatar/avatar_s.jpg";
		img.width = 50;
		img.height = 55;
		img.onload = function(){
			var d = new Date();
			var func = demo(img);
			alert("耗时：" + (new Date() - d) + "(ms)，\n共执行了" + func + "次的putImageData");
		}
})()
</script>
</body>
</html>

对于这个效果，因为我们并不需要操作图像的rgba数据，而只是把图像进行分割，所以利用putImageData的后四个可见区参数进行了设置就行了。
但是，这样做的性能却非常不理想。因为我们操作的ImageData数据实在太多了，循环执行了2750遍，相当于我们对整幅图像进行了2750次的像素级复制，而其实在可见区之外的ImageData数据并不是我们所需要的。

那么，我们在对源图getImageData的时候，可以只获取我们需要的ImageData。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>效率相关</title>
</head>
<body>
<canvas id="board" width="100" height="110"></canvas>
<script type="text/javascript">
function splinter(ctx,tempCtx, w, h){
	var newData = [];
	var round = 0; //统计循环次数
	for(var y = 0; y < h; y++){
		newData[y] = [];
		for(var x = 0; x < w; x++){
			newData[y][x] = tempCtx.getImageData(x, y, 1, 1); //分开获取所需要的ImageData
			ctx.putImageData(newData[y][x], x*2, y*2);
			round ++ ;
		}
	}
	return round;
}
function demo(img){
	var w = img.width,
		h = img.height;
	var temp = document.createElement('canvas');
		temp.width = w;
		temp.height = h;
	var tempCtx = temp.getContext('2d');
		tempCtx.drawImage(img, 0, 0, w, h);
	var ctx =  document.getElementById('board').getContext('2d');
	return round = splinter(ctx,tempCtx, w, h);
}
(function(){
	var img = new Image();
		img.src = "/blog/resource/avatar/avatar_s.jpg";
		img.width = 50;
		img.height = 55;
		img.onload = function(){
			var d = new Date();
			var func = demo(img);
			alert("耗时：" + (new Date() - d) + "(ms)，\n共执行了" + func + "次的getImageData和putImageData");
		}
})()
</script>
</body>
</html>

第二种做法虽然在循环的时候多运行了一个方法（共执行2750次的getImageData和putImageData方法），但因为操作的ImageData少了2750倍，所以在效率上比第一种方式高了很多。

但从流程上来讲，我们只需要在刚开始的时候获取一次源图的ImageData（执行getImageData），对数据进行再排列后，最后再输出一次新的ImageData（执行putImageData）就可以了。
根本不需要在循环中反复调用getImageData和putImageData。所以现在的关键点是get和put之间的如何对数据进行重排列。

ImageData.data可以看做一个矩形矩阵，我们已知，它的序列号（n）与ImageData.width(w),及x轴序列号(x),y轴序列号（y）的关系是：n = ((y * w) + x) * 4; （其中的4表示了RGBA四个数据）。我们要的新的输出ImageData，其实是x加倍，y加倍，w加倍的一个新矩阵。那么新矩阵序号与原x,y,w的关系式应该是：t = ((y * 2 * w * 2) + x * 2) * 4;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>效率相关</title>
</head>
<body>
<canvas id="board" width="100" height="110"></canvas>
<script type="text/javascript">
function splinter(ctx,imgPixels){
	var round = 0; //统计循环次数
	var n = 0,
		w = imgPixels.width,
		h = imgPixels.height,
		newdata = ctx.createImageData(w*2, h*2);
	for(var y = 0; y < h; y++){
		for(var x = 0; x < w; x++){
			n = ((y * w) + x) * 4; /* data序号n与x,y,w的关系 */
			t = ((y * 2 * w * 2) + x * 2) * 4; /* 分割后，y,x,w都变大了一倍 */
			newdata.data[t] =  imgPixels.data[n];
			newdata.data[t + 1] =  imgPixels.data[n + 1];
			newdata.data[t + 2] =  imgPixels.data[n + 2];
			newdata.data[t + 3] =  imgPixels.data[n + 3];
			round ++ ;
		}
	}
	ctx.putImageData(newdata, 0, 0);
	return round;
}
function demo(img){
	var w = img.width,
		h = img.height;
	var temp = document.createElement('canvas');
		temp.width = w;
		temp.height = h;
	var tempCtx = temp.getContext('2d');
		tempCtx.drawImage(img, 0, 0, w, h);
	var ctx = document.getElementById('board').getContext('2d');
	var imgPixels = tempCtx.getImageData(0, 0, w, h);
	return splinter(ctx,imgPixels);
}
(function(){
	var img = new Image();
		img.src = "/blog/resource/avatar/avatar_s.jpg";
		img.width = 50;
		img.height = 55;
		img.onload = function(){
			var d = new Date();
			var func = demo(img);
			alert("耗时：" + (new Date() - d) + "(ms)，\n共循环了" + func + "次,循环内不执行getImageData和putImageData方法");
		}
})()
</script>
</body>
</html>

第三种方法相对于第二种方法的效率提高了十几倍。第三种方法的关键点是找出新旧矩阵之间的关系，对于我们这一例来说还比较容易，复杂一点的，算法可就没这么简单了。

——————————————
重要补充：

我们先总结下三种方法：第一种：效率低差，但理解起来最简单。第三种，算法复杂，但效率最高。第二种，折中。
然而，如果使用的是webkit，opera浏览器，我们会发现第一种方法的效率比之第三种方法居然差不了多少！
可以看出webkit,opera对putImageData做过优化。对于putImageData(imgdata, x, y, x, y, 1 ,1)方法，webkit,opera只对（x,y,1,1）这个1平方px区域内的数据进行了put操作，区域外的数据并没有进行操作，这样在效率上会有很大的提高。
可惜的是firefox(9)就没有做过优化。要加油啊，Mozila！
最新测试了下ie9，结果显示第一种方法的效率的确很低，而第二种方法比第一种方法的效率还要低一倍。看来ie9果然也没用对putImageData进行优化，而且ie9下的getImageData也没用像其他浏览器下那么优化。对于getImageData(x,y,1,1)的获取，它操作的整个图像的像素数据的，而不是那个1平方px内的数据。

目前来说，考虑到各个浏览器原生方法的效率问题，第三种方法是最优的，即不要反复调用getImageData和putmageData，因为某些浏览器下一旦调用就是操作全部imageData的，而不会看你的参数。不过在未来，各个浏览器肯定会对原生方法进行优化的，在考虑第一种方法的时候就不用有所顾忌了！

标签： imageData
发布在 HTML5 | 2 条评论 »

canvas的像素级操作——3.使用卷积矩阵作者：ONEBOYS 发表时间： 2012年01月12号，星期四阅读：789 次

利用卷积矩阵(Convolution Matrix)操作像素，我们可以很方便的得到诸如模糊、边缘检测、锐化、浮雕和斜角这样的效果。

常用的矩阵类型是 3 x 3 矩阵，另外还有5 x 5的矩阵。

工作原理：http://flex4jiaocheng.com/blog/280

点阵图中的每一个像素被称为“初步像素”，用与卷积矩阵同样面积的“初步像素”从左到右从上到下与卷积矩阵中相应位置的值相乘，再将得到的9个或25个中间值相加，就得到了“初步像素”矩阵中央的一个值的结果值再与Divisor（因子）相除，与Offset（偏移量）相加，最后得到终值。如下图所示：

应用卷积矩阵实现特效:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>利用卷积矩阵实现特效</title>
</head>
<body>
<canvas id="canvas1" width="200" height="200" title="浮雕效果"></canvas>
<canvas id="canvas2" width="200" height="200" title="边缘检测"></canvas>
<canvas id="canvas3" width="200" height="200" title="锐化"></canvas>
<canvas id="canvas4" width="200" height="200" title="基本模糊"></canvas>
<canvas id="canvas5" width="200" height="200" ></canvas>
<script type="text/javascript">
function convolution(imgPixels, matrix, divisor, offset){
	/* 卷积矩阵应用函数 */
    var w = imgPixels.width,
		h = imgPixels.height,
		d = imgPixels.data;
	var canvas = document.createElement('canvas'),
		ctx = canvas.getContext('2d'),
		newImgPixels = ctx.createImageData(w,h);
	for (var y = 1; y < h-1; y++) {
			for (var x = 1; x < w-1; x++) {
				for (var c = 0; c < 3; c++) {
					/* RGB通道 */
					var i = (y*w + x)*4 + c;
					newImgPixels.data[i]=(matrix[0]*d[i-(w+1)*4] + matrix[1]*d[i-w*4] + matrix[2]*d[i-(w-1)*4]
										+ matrix[3]*d[i-4]       + matrix[4]*d[i]     + matrix[5]*d[i+4]
										+ matrix[6]*d[i+(w-1)*4] + matrix[7]*d[i+w*4] + matrix[8]*d[i+(w+1)*4])
										/ divisor + offset;
				}
				newImgPixels.data[(y*w + x)*4 + 3] = 255;
			}
		}
    return newImgPixels;
}
(function(){
	/* demo */
	var imgObj = new Image();
		imgObj.src = '/blog/resource/avatar/avatar_s.jpg';
	var embossing = {
		/* 浮雕效果 */
			matrix : [-2, -1, 0,
					  -1,  1, 1,
					   0,  1, 2],
			divisor: 1,
			offset : 0
		},
		edge = {
		/* 边缘检测 */
			matrix : [0, -1, 0,
					 -1,  4, -1,
					  0, -1, 0],
			divisor: 1,
			offset : 0
		},
		sharpening = {
		/* 锐化 */
			matrix : [ 0, -1, 0,
					  -1,  5, -1,
					  0,  -1, 0],
			divisor: 1,
			offset : 0
		},
		blur = {
		/* 基本模糊 */
			matrix : [0, 1, 0,
					  1, 1, 1,
					  0, 1, 0],
			divisor: 5,
			offset : 0
		},
		oneboys = {
		/* 胡诌的一个矩阵 */
			matrix : [ 0, 1, 4,
					  -1,  5, -1,
					  3,  -1, 2],
			divisor: 5,
			offset : 0
		};
	function process(obj,effect){
		var context = document.getElementById(obj).getContext('2d');
			context.drawImage(imgObj, 0, 0);
		var imgPixels = context.getImageData(0, 0, imgObj.width, imgObj.height);
		imgPixels = convolution(imgPixels, effect.matrix, effect.divisor, effect.offset)
		context.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
	}
	var canvas = document.getElementsByTagName('canvas');
	for(var i = 0, l = canvas.length; i < l; i++ ){
		var loadObj = new Load(canvas[i]);
		(function(obj){
			obj.loading();
			imgObj.addEventListener('load',obj.loaded,false);
		})(loadObj);
	};
	imgObj.addEventListener('load',function(){
		process('canvas1',embossing);
		process('canvas2',edge);
		process('canvas3',sharpening);
		process('canvas4',blur);
		process('canvas5',oneboys);
	},false);
})()
/* 以下与示例代码无关 */
function Load(canvas){
	/* canvas Loading 效果 */
	var backCtx = canvas.getContext('2d');
		backWidth = canvas.width;
		backHeight = canvas.height;
	var drawIntervalID,
		spokes = 7;
	var	drawPad = document.createElement('canvas');
		drawPad.width = 30;
		drawPad.height = 30;
	var	drawCtx = drawPad.getContext('2d');
		drawCtx.translate(drawPad.width/2, drawPad.height/2);
		drawCtx.lineWidth = 5;
		drawCtx.lineCap = "round";
		drawCtx.strokeStyle = "rgba(0,0,0,0.1)";
		drawCtx.fillStyle = "#fff";
	var draw = function(){
		drawCtx.fillRect(0,0, drawPad.width ,drawPad.height);
		drawCtx.rotate(Math.PI*2/spokes);
		for (var i=0; i<spokes; i++) {
			drawCtx.rotate(Math.PI*2/spokes);
			drawCtx.beginPath();
			drawCtx.moveTo(0,8);
			drawCtx.lineTo(0,10);
			drawCtx.stroke();
		}
		backCtx.drawImage(drawPad,(backWidth - drawPad.width)/2, (backHeight - drawPad.height)/2);
	}
	this.loading = function(){
		 drawIntervalID = setInterval(draw,200);
	}
	this.loaded = function(){
		clearInterval(drawIntervalID);
		backCtx.clearRect((backWidth - drawPad.width)/2, (backHeight - drawPad.height)/2, drawPad.width ,drawPad.height);
	}
}
</script>
</body>
</html>

上面demo中卷积的实现函数来自于在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

推荐一篇有趣的文章：卷积的物理意义

标签： blur, Convolution, imageData, Matrix, sharpening
发布在 HTML5 | 一条评论 »

canvas的像素级操作——2.RGBA通道调色作者：ONEBOYS 发表时间： 2012年01月12号，星期四阅读：627 次

在前文里我们已经提到了ImageData，它包含了三条数据{width,height,CanvasPixelArray}，而其中CanvasPixelArray存储了所有像素点的RGBA数据,第一个像素的red,green,blue,alpha通道值对应的就是CanvasPixelArray[0]-CanvasPixelArray[3]，如此按从左往右，由上往下依次存储。

我们通过修改像素点的rgb值就能改变像素的色相，修改alpha值就能改变像素的不透明度。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ImageData通道操作</title>
</head>
<body>
<canvas id="board" width="1000" height="500"></canvas>
<script type="text/javascript">
(function draw(){
	var canvas = document.getElementById('board');
	var context = canvas.getContext('2d');
	var imgPixels = false,
	w = 1000, h = 500,
	x = 0,  y = 0;
	imgPixels = context.createImageData(w, h);
	//imgPixels = context.getImageData(0, 0, w, h);
	var pix = imgPixels.data;
	for (var i = 0,n = pix.length; i < n;) {
		/* 设置点的rgba值。ImageData.data数据是每4个值(分别是rgba)对应1个像素点 */
		pix[i  ] = i & 0xff;
		pix[++i] = i & 0xff;
		pix[++i] = i & 0xff;
		pix[++i] = 255;
	}
	context.putImageData(imgPixels, x, y);
})()
</script>
</body>
</html>

上面的demo中，我们创建了一个50*50像素点的ImageData，那么ImageData.data包含的数据应该是有 50 x 50 x 4 条。
每12条一循环（即每隔两个像素），像素点的rgba值，没有经过设置的像素点，它们的缺省值是：[255,255,255,255]。

上例是，创建新的ImageData，相当于所有ImageData的初始值都是255。
下面针对图像的ImageData进行计算设值，以此改变图像的色相。这是一个RGB彩色转gray的效果。（效果同ie的滤镜：filter:gray();已经最新出现的webkit滤镜：-webkit-filter: grayscale(1);）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>彩色图转灰度处理</title>
</head>
<body>
鼠标过来<br />
<img id="imgObj" src="/blog/resource/avatar/avatar_s.jpg" width="200" onmouseover="this.src=grayscale(this)" />
<script type="text/javascript">
function grayscale(img){
	/* 图像Grayscale处理函数 */
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	canvas.width = img.width;
	canvas.height = img.height;
	ctx.drawImage(img,0,0);
	var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
	for(var y = 0, h = imgPixels.height; y < h; y++){
		for(var x = 0, w = imgPixels.width; x < w; x++){
			var i = (y * 4) * w + x * 4;
			/* Gray = R*0.299 + G*0.587 + B*0.114 */
			var gray = 0.299*imgPixels.data[i] + 0.587*imgPixels.data[i + 1] + 0.114*imgPixels.data[i + 2];
			imgPixels.data[i] = gray;
			imgPixels.data[i + 1] = gray;
			imgPixels.data[i + 2] = gray;
		}
	}
	ctx.putImageData(imgPixels, 0, 0, 0, 0, canvas.width, canvas.height);
	return canvas.toDataURL();
}
</script>
</body>
</html>

上面没有对ImageData.data做一次循环，而是对ImageData.width,ImageData.height做了两次循环。
两种循环其实是一样的。可以看下关系：ImageData.data.length = ImageData.width x ImageData.heigh x 4;
data的序号 n = ( (y * ImageData.width) + x) x 4 ;

而关于RGB转gray运算算法的知识，还可以参见这两篇文章：彩色转灰度算法，RGB向灰度转换的原理

在上例中，出现了一个canvas对象的新方法toDataURL,这个方法会将canvas对象转换成data_URIs,一个base64 strings。这样就能出现在image标签下中的src中了。

canvas提供像素级数据，为很多算法的应用提供了平台，实现photoshop中的众多神奇图像效果在前端都已成为可能。
甚至于我们还能实现电影的蓝幕效果——针对video的帧,通过drawImage绘进canvas，再做rgba处理，将规定颜色的像素的alpha值设为0，就能使特定部分变成透明，进而实现视频合成。查看演示

标签： data_URIs, gray, grayscale, imageData, rgba, toDataURL
发布在 HTML5 | 没有评论 »

1 / 2712 3 4 5 »...尾页 »

(Three.js) 页面展现3D模型 作者：ONEBOYS 发表时间： 2012年02月24号，星期五 阅读：4,159 次

firefox10的3D Transform 作者：ONEBOYS 发表时间： 2012年02月1号，星期三 阅读：698 次

canvas的像素级操作——4.关注性能 作者：ONEBOYS 发表时间： 2012年01月17号，星期二 阅读：892 次

canvas的像素级操作——3.使用卷积矩阵 作者：ONEBOYS 发表时间： 2012年01月12号，星期四 阅读：789 次

canvas的像素级操作——2.RGBA通道调色 作者：ONEBOYS 发表时间： 2012年01月12号，星期四 阅读：627 次

(Three.js) 页面展现3D模型作者：ONEBOYS 发表时间： 2012年02月24号，星期五阅读：4,159 次

firefox10的3D Transform 作者：ONEBOYS 发表时间： 2012年02月1号，星期三阅读：698 次

canvas的像素级操作——4.关注性能作者：ONEBOYS 发表时间： 2012年01月17号，星期二阅读：892 次

canvas的像素级操作——3.使用卷积矩阵作者：ONEBOYS 发表时间： 2012年01月12号，星期四阅读：789 次

canvas的像素级操作——2.RGBA通道调色作者：ONEBOYS 发表时间： 2012年01月12号，星期四阅读：627 次