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 ...
随机推荐
- MySQL 8.0版本连接报错:Could not create connection to database server.
准备搭建一个Spring Boot 组合mybatis的项目,数据库采用的是MySQL 8.0.11按照以往的配置,使用插件mybatis-generator-maven-plugin生成代码时,一直 ...
- Echarts 数据视图 生成Excel的方法
一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...
- Web前端:博客美化:一、模板美化
1.选用模板simplememory 2.写css放在 这些会覆盖掉原来的css样式 我是在网上找的css代码二次加工的 : ) /*1.针对simplememory的修改*/ #google_ad_ ...
- zabbix3.4 监控mysql 数据库连接数
zabbix3.4 监控mysql 数据库连接数具体监控配置待定,近期即将发布!
- WPS客户端更新日志留着备用
WPS Office (10.1.0.7520)==========================================新增功能列表------------WPS文字1 拼写检查:新增“中 ...
- 四、View的工作原理
1.ViewRoot和DecorView ViewRoot对应于ViewRootImpl类,它是连接WindowManager和DecorView的纽带,View的三大流程均是通过ViewRoot来完 ...
- myapp——自动生成小学四则运算题目的命令行程序(侯国鑫 谢嘉帆)
1.Github项目地址 https://github.com/baiyexing/myapp.git 2.功能要求 题目:实现一个自动生成小学四则运算题目的命令行程序 功能(已全部实现) 使用 -n ...
- spring学习总结——高级装配学习三(Bean的作用域)
一.bean的作用域 在默认情况下,Spring应用上下文中所有bean都是作为以单例(singleton)的形式创建的.也就是说,不管给定的一个bean被注入到其他bean多少次,每次所注入的都是同 ...
- nginx配置静态项目
当nignx可以加载下面的这个service时 server { listen 8085; server_name 1.192.60.82; location / { root /etc/nginx ...
- vue实现打印功能的两种方法
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 import Print from 'v ...