javascript根据像素点取位置示例
<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>
相关推荐
-
利用纯JS实现像素逐渐显示的方法示例
前言 对于新手的我,以前从来没有做过对像素进行操作的实例.于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷.下面是效果图,因为重在思路,效果就简陋一些. 实现思路 其实就是简单的用JS实现将左上角的矩形随时间图像逐渐显示在它的右下方. 首先,先把思路架构起来,因为对像素操作,所以需要用到canvas. 然后,我们 需要画一个矩形,并且需要获取到它的每一个像素的值,即每一个像素的4要素,rgba.(方法getImageData,4个参数,前两个坐标,X和Y,后两个是长和宽) 最后,用一个定
-
javascript 像素拼图实现代码
JavaScript像素拼图游戏 body{ margin:0px; padding:0px; background-color:#111111; font-family:Arial, Helvetica, sans-serif,"宋体"; } .container{ background-color:#CCCCCC; padding:0px 0px 0px 1px; width:609px; margin:0px auto; font-size:12px; height:auto;
-
javascript根据像素点取位置示例
复制代码 代码如下: <html> <body> <canvas id="canvas" width="100" height="100" style="background-color: #000;"/> <script> function position (x,y){ this.x = x;
-
JavaScript中removeChild 方法开发示例代码
1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove
-
JavaScript封装单向链表的示例代码
使用JavaScript封装单向链表: 1. 封装LinkList的类,用于表示我们的链表结构. 2. 在LinkList类中有一个Node类,用于封装每一个节点上的信息(data与next). 3. 在链表中保存两个属性,一个是链表的长度,一个是链表中的第一个节点. 4.封装一些链表的常用方法: append(element):想列表尾部添加一个新的项: insert(position,element):向列表的特定位置插入一个新的项: get(position):获取对应位置的元素: ind
-
JavaScript实现跟随广告的示例代码
浮动广告是目前网站很常见的一种广告形式,浮动广告能实时跟随用户的浏览,有效的传达产品要表达的意思,达到很好的传播效果.那么浮动广告是怎么实现的呢,其实实现浮动广告并不难,具体如下: * { margin: 0; padding: 0; } img { position: absolute; left: 0; } p { text-align: center; line-height: 40px; } <img src="images/left_ad.png" alt="
-
JavaScript 实现下雪特效的示例代码
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下雪效果实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <style type=
-
javascript基础数据类型转换教程示例
目录 数值型转换为字符串类型 字符串类型转换为数值型 转换为布尔型 结语 数值型转换为字符串类型 方式 说明 案例 toString() 转成字符串 var num =1; alert ( num.toString()); String() 强制转换 转成字符串 var num =1; alert ( String ( num )); 加号拼接字符串 和字符串拼接的结果都是字符串 var num =1; alert ( num +＂我是字符串"); // 1.将数字型转换为字符串类型 var n
-
JavaScript实现流星雨效果的示例代码
目录 演示 技术栈 源码 首先建立星星对象 让星星闪亮起来 创建流星雨对象 让流星动起来 演示 上一次做了一个雨滴的动画,顺着这种思维正好可以改成流星雨,嘿嘿我真是一个小机灵. 技术栈 还是先建立画布 <body> <canvas id="stars"></canvas> </body> 画布标签我昨天讲过了.不知道的小伙伴可以去看看. 源码 首先建立星星对象 //创建一个星星对象 var Star = function (){ this
-
Vue实现DOM元素拖放互换位置示例
目录 一.拖放和释放 二.可拖拽属性 三.DataTransfer 3.1 属性 3.2 方法 四.DataTransferItem 4.1 属性 4.2 方法 五.DataTransferItemList 六.Event事件 七.实例 7.1 html代码 7.2 JS代码 一.拖放和释放 HTML 拖放接口使得 web 应用能够在网页中拖放文件.这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作. 拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素)
-
详解JavaScript实现简单的词法分析器示例
目录 正文 什么是词法分析器? 实现一个简单的词法分析器 总结 正文 词法分析是编译器的一项重要工作,其目的是将源代码转换成单个单词(token)的序列,方便后续语法分析器(parser)对其进行分析.在本文中,我们将使用 JavaScript 实现一个简单的词法分析器,以便更好地理解其原理. 什么是词法分析器? 在编译器中,词法分析器是将源代码分割成单个单词的程序.它将输入的字符流转换为单词流,这些单词(token)在后续的编译过程中将被用来构建语法树(parse tree). 词法分析器通常
-
JavaScript获取指定元素位置的方法
本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() { var self = document.getElementById("eID"); var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft; var top = self.getBoundingClientR