1. <html>
  2. 	<body>
  3. 		<canvas id="canvas" width="100" height="100" style="background-color: #000;"/>
  4.  
  5. 		<script>
  6. 			function position  (x,y){
  7. 				this.x = x;
  8. 				this.y = y;
  9. 			}
  10.  
  11. 			var canvas = document.getElementById('canvas'),
  12. 				ctx = canvas.getContext('2d');
  13. 				width = canvas.width,
  14. 				height = canvas.height;
  15. 			ctx.fillStyle = "#FF0000";
  16. 			ctx.font = "20px Arial";
  17. 			ctx.fillText("妈妈",10,50);
  18.  
  19. 			var pixs = ctx.getImageData(0,0,width,height).data;
  20. 			var Pixels = new Array();
  21.  
  22. 			for(var i=0;i<pixs.length;i+= 4)
  23. 			{
  24. 				var r = pixs[i],
  25. 					g = pixs[i+1],
  26. 					b = pixs[i+2],
  27. 					a = pixs[i+3];
  28.  
  29. 				if(r != 0 || g != 0 || b != 0 ){
  30. 					var x = i%400;
  31. 					var y = i/400;
  32. 					Pixels.push(new position(x,y));
  33. 				}
  34. 			}
  35.  
  36. 		</script>
  37. 	</body>
  38. </html>

　　

JavaScript Canvas 根据像素点取位置的更多相关文章

  1. 转载——JavaScript学习笔记：取数组中最大值和最小值

    转载自:http://www.w3cplus.com/javascript/calculate-the-max-min-value-from-an-array.html. 取数组中最大值 可以先把思路 ...

  2. JavaScript四种数值取整方法

    一.Math.trunc() 1.定义 Math.trunc()方法去除数字的小数部分,保留整数部分. 2.语法 Math.trunc(value) 3.示例 console.log(Math.tru ...

  3. android GPS 定位，取位置信息

    现在很多app ,需要取位置信息,所以我也做了一个模块用来取位置信息:   加入位置服务所需的权限: <uses-permission android:name="android.pe ...

  4. javascript canvas 生成图片的方法

    javascript canvas 生成图片的方法 先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可<pre><!DOCTYPE HTML><ht ...

  5. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  6. JavaScript+canvas 绘制多边形

    效果图: <body> <canvas id="square" width="500"></canvas> <canv ...

  7. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  8. 用javascript/jQuery给CKEditor取值/赋值

    CKEditor 是著名的 HTML 编辑器,IBM.Oracle.Adobe 等都在用.CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更 ...

  9. 从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建

    项目演示 项目演示地址: 体验一下 项目源码: 项目源码 代码结构 本节做完效果 游戏主页面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. jtable插件api

    官网2016-03-15 事例图: 一.客户端配置 1. paging boolean default:false 配置是否分页,果断改为true. 2. pageList string defaul ...

  2. hdu 5492

    动态规划 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm&g ...

  3. TortoiseGit 添加邮箱 失败保存配置

    解决方法   将保存至改为此版本库

  4. tornado 非阻塞方法

    http://sebastiandahlgren.se/2014/06/27/running-a-method-as-a-background-thread-in-python/

  5. linux上进程状态查询

    linux上进程有5种状态: 1. 运行(正在运行或在运行队列中等待) 2. 中断(休眠中, 受阻, 在等待某个条件的形成或接受到信号) 3. 不可中断(收到信号不唤醒和不可运行, 进程必须等待直到有 ...

  6. ERROR Cannot determine the location of the VS Common Tools Folder

    参考:ERROR Cannot determine the location of the VS Common Tools Folder   http://blog.csdn.net/m3728975 ...

  7. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

  8. poj 2524 （并查集）

    http://poj.org/problem?id=2524 题意:在一所学校里面的人,都有宗教信仰,不过他们的宗教信仰有可能相同有可能不同,但你又不能直接去问他们,但你可以问他们和谁是同一个宗教.通 ...

  9. poj 1010

    http://poj.org/problem?id=1010 题意:给你n种邮票的价值,到0结束,这些邮票价值有可能相同,但是形状是不同的. 还有给你m个收藏家所需要收藏的邮票的总价格.到0结束. 每 ...

  10. CentOS 6.5 安装Python 3.5

    1.CentOS6.5 安装Python 的依赖包 yum groupinstall "Development tools" yum install zlib-devel bzip ...