javascript根据像素点取位置示例


Posted in Javascript onJanuary 27, 2014
<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>
Javascript 相关文章推荐
关于jquery中全局函数each使用介绍
Dec 10 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
JavaScript中string对象
Jun 12 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 #Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 #Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 #Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 #Javascript
javascript中定义私有方法说明(private method)
Jan 27 #Javascript
用javascript替换URL中的参数值示例代码
Jan 27 #Javascript
jquery选择器之基本过滤选择器详解
Jan 27 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP 高手之路(二)
2006/10/09 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
addEventListener 的用法示例介绍
2014/05/07 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python 判断一个进程是否存在
2009/04/09 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
消防器材管理制度
2014/01/28 职场文书
技能比赛获奖感言
2014/02/14 职场文书
交通安全标语
2014/06/06 职场文书
国际贸易系求职信
2014/08/09 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android