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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM