JavaScript Canvas 根据像素点取位置

<html>
	<body>
		<canvas id="canvas" width="100" height="100" style="background-color: #000;"/>

		<script>
			function position  (x,y){
				this.x = x;
				this.y = y;
			}

			var canvas = document.getElementById('canvas'),
				ctx = canvas.getContext('2d');
				width = canvas.width,
				height = canvas.height;
			ctx.fillStyle = "#FF0000";
			ctx.font = "20px Arial";
			ctx.fillText("妈妈",10,50);

			var pixs = ctx.getImageData(0,0,width,height).data;
			var Pixels = new Array();

			for(var i=0;i<pixs.length;i+= 4)
			{
				var r = pixs[i],
					g = pixs[i+1],
					b = pixs[i+2],
					a = pixs[i+3];

				if(r != 0 || g != 0 || b != 0 ){
					var x = i%400;
					var y = i/400;
					Pixels.push(new position(x,y));
				}
			}

		</script>
	</body>
</html>

  

posted @ 2013-11-13 18:16  のんきネコ  阅读(3888)  评论(0编辑  收藏  举报