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 ...
随机推荐
- frame buffer简单应用
现在我们要在LCD上画一个点,我们无法直接对LCD屏进行操作.这时候就需要用到FrameBuffer,Linux可以FrameBuffer这个设备来供用户态进程实现直接写屏.首先我们先简单看一下lin ...
- [PHP] assert()断言检测函数
assert_options函数 设置断言的参数 assert 函数 ,检测一个断言 <?php // 激活断言,并设置它为 quiet assert_options(ASSERT_ACTIVE ...
- SQL中# 与$ 的区别
区别: (1)#将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是id,则解析成的sql为order by "id&quo ...
- 2019前端面试题汇总(主要为Vue)
摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...
- finereport报表--动态格间运算 一
一.运算符: ! 绝对值 A2[A2:!1] ; A2 标示从列A纵向第2单元格开始,!1 表示第1个位置的单元格; [A2:!1] 代表索引,表示从A列纵向开始往下,第1个单元格的位置的索引 ...
- Oracle11g: datetime
--上一月,上一年 select add_months(sysdate,-1) last_month,add_months(sysdate,-12) last_year from dual; --下一 ...
- freemark使用总结
1.下拉框中使用三元表达式: <option value="1类" ${(bean.col5!?string="1类")?string('selected ...
- GeoServer安装配置
需安装文件 1.安装jdk 2.安装GeoServer: (1).在安装GeoServer前,需要安装java运行环境,点击文件夹内的jdk安装文件,选择jdk安装路径进行安装:直到安装完成. (2) ...
- 对国内IoT的展望
这个世界上让任何人最安心的,莫过于自己能够完全控制,反之什么都无法控制的,万念俱灰之下,最后只有自我了结.芸芸众生都是在这个之间徘徊,尽可能的去掌控,尽可能的去拥有,觉得能够安心,其实只是自由的内心被 ...
- Python编写脚本(输出三星形状的‘*’符号)
环境:python3.* 心得:个人认为脚本非我强项,以下效果可以有更简单解决方案,纯属练习逻辑. 方案一: s=1 while s<=10: #这是决定多少列,起始为1,大循环一圈即加一,就是 ...