h5-canvas 单像素操作
###1. 自定义获取指定坐标像素
var canvas = document.querySelector("#cav");
if(canvas.getContext){
var ctx= canvas.getContext("2d");
ctx.fillRect(100,100,200,200)
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
var color = getColor(imageData,50,50);
console.log(color);
function getColor(imageData,x,y){
var data = imageData.data;
var w = imageData.width;
var color = [];
color[0] = data[4*(x*w+y)]; // R
// 例如:(1,2)该点有y*w行 + x 个像素 即 2*2+1=5
color[1] = data[4*(y*w+x)+1]; // G
color[2] = data[4*(y*w+x)+2]; // B
color[3] = data[4*(y*w+x)+3]; // A
return color;
}
}
注意:css定义的是canvas背景颜色,使用getImageData获取的是canvas画布上的元素信息,默认为黑色透明
h5-canvas 单像素操作的更多相关文章
- HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频 像素操作属性和方法 width 返回 ImageData ...
- canvas上的像素操作(图像复制,细调)
canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...
- 【canvas学习笔记八】像素操作
ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息.它包含以下可读属性: width canvas的宽度,单位是像素. height canvas的高度,单位是像素 ...
- canvas像素操作
像素操作 相关方法:getImageData(x,y,w,h); putImageData(oImg,x,y); createImageData(w,h); 1.getImageData(x,y, ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 【转】android Graphics(四):canvas变换与操作
android Graphics(四):canvas变换与操作 分类: 5.andriod开发2014-09-05 15:05 5877人阅读 评论(18) 收藏 举报 目录(?)[+] 前言 ...
- android Graphics(四):canvas变换与操作
前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清 ...
- Android Bitmap 载入与像素操作
Android Bitmap 载入与像素操作 一:载入与像素读写 在Android SDK中,图像的像素读写能够通过getPixel与setPixel两个Bitmap的API实现. Bitmap AP ...
随机推荐
- Beanstalkd,zeromq,rabbitmq的区别
1).rabbitmq(功能强大,管理应用也完善,不过也比较重量级)2).zeromq(从rabbitmq出来的一个小而快速的队列,基本是目前最快的队列机制,自身支持多种模式,可以对各个模式进行自己组 ...
- 20190321-HTML基本结构
目录 1.HTML概念 超文本标记语言 2.HTML版本 HTML HTML5 3.HTML基本结构 基本结构 元素.标签.属性 4.HTML常用标签 内容 1.HTML概念 HTML(HyperTe ...
- 【代码笔记】Web-CSS-CSS 教程
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Dynamics CRM图表高级话题:创建跨实体的图表
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复147或者20150728可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 制作图表你会发现,在界面上只能选 ...
- ArcGIS API for JavaScript:Layer之间那点儿事
先来看一个模型: |–TiledMapServiceLayer | |–ArcGISTiledMapServiceLayer |–DynamicLayer | |–Dyn ...
- vue实现表计监测界面
已经好几个月没有更新博客了,因为最近太忙,忙得连写博客的时间都没有.上班赶项目开启996模式,下班要去练车考驾照,一边还在赶书稿,一边还接了私活.不由得感叹:年纪大了,再也经不起那么折腾..... 每 ...
- 2018年IOS/Android UI设计规范
更多参考: 2017最新设计尺寸及规范 UI : 2018年IOS/Android UI设计规范 转载:https://www.jianshu.com/p/03e5cdd4ffd6
- H-ui框架信息图标点击跳出页面问题
在html中为消息a标签添加id: 在static/h-ui/js/H-ui.min.js添加事件:
- 支持JSP和Servlet的Web服务器
支持JSP和Servlet的Web服务器 1.Tomcat 服务器 目前非常流行的Tomcat服务器是Apache-Jarkarta开源项目中的一个子项目,是一个小型.轻量级的支持JSP和Servle ...
- AlwaysOn配置时在连接步骤时报错(35250)
1.错误描述 1XX.XXX.XXX.241(主节点) 1XX.XXX.XXX.242(从节点) 添加节点需要在主节点上执行的,错误代码:35250 报错截图 2.网上相关介绍都是怀疑端口5022的问 ...