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 ...
随机推荐
- My操作小技巧
1.当我们新增一条数据之后想要获取其自增长的id,可以紧随新增语句后调用 SELECT last_insert_id();即可获得,一般搭配变量一起使用 SELECT @newUserId:=last ...
- 零基础学Python--------入门篇 第1章 初始Python
入门篇 第1章 初始Python 1.1 Pyhton 概述 1.1.1 了解 Python Python,本义是指“蟒蛇”.1989年,荷兰人Guido van Rossum发明了一种面向对象的 ...
- Registrator中文文档
目录 快速入门 概述 准备 运行Registrator 运行Redis 下一步 运行参考 运行Registrator Docker选项 Registrator选项 Consul ACL令牌 注册URI ...
- c或c++利用scanf无限输入并进行简单操作如比大小等
#include <iostream> using namespace std; int main() { ; ) //scanf返回值为int类型表示成功输入的数据数量个数 { if(n ...
- java新知识系列 六
sleep和wait的区别有: Servlet方法的使用 方法重写的规则,以及两同两小一大原则: DispatcherServlet的解析 依赖注入DU和控制反转Ioc AOP和OOP的区别 Spri ...
- 使用Connector/C++(VS2015)连接MySQL的完整例子
完整示例代码1 /* Copyright 2008, 2010, Oracle and/or its affiliates. All rights reserved. This program is ...
- ffmpeg错误码
以下ffmpeg错误代码及翻译是本人遇到或发现后整理出来的,不保证包含全部错误代码 EPERM(不允许操作,无相应权限) = -1 ENOENT(文件或目录不存在) = -2 ESRCH(线程不存在) ...
- 从0开始的Python学习002python的数据类型
在创建变量的时候不用声明数据类型 # 创建变量 a = 10 # 打印变量值 print(a) 结果如下: 这种感觉和Java有很大的不同,感觉python很神奇,数据的类型是python自己决定的. ...
- nginx多server配置记录
直接在配置文件(/etc/nginx/nginx.conf)中添加如下代码: server { listen 8080; server_name 192.168.100.174:8080; root ...
- 20181218 - PostgreSQL Auto Commit Guide(自动提交)
20181218 - PostgreSQL Auto Commit Guide 参考官网简介,https://www.postgresql.org/docs/10/ecpg-sql-set-autoc ...