h5-canvas 像素操作
###1.得到场景像素数据
getImageData():获得一个包含画布场景像素数据的ImageData对象,它代表了画布区域的对象数据
ctx.getImageData(sx,sy,sw,sh)
sx ( sy): 将要被提取的像素数据矩形区域的左上角x (y) 坐标
sw (sh): 将要被提取的像素数据矩形区域的宽度 ( 高度)
###2.ImageData对象
ImageData对象中存储着canvas对象的真实像素数据,包含以下几个只读属性:
width:图片宽度,单位是像素
height:图片高度,单位是像素
data:Uint8ClampedArray类型的一维数组,
包含着RGBA格式的整型数据,范围在0至255之间(包含255)
R、G、B、A的值都为0-255 R、G、B指黑色到白色 A指透明到不透明 (都由0-255逐渐改变)
###3.在场景中写入像素数据
putImageData()方法去对场景进行像素数据的写入
putImageData(myImageData, dx, dy)
dx和dy参数表示你希望在场景内的左上角绘制的像素数据所得到的设备坐标
eg: 设置透明度
var imageData = ctx.getImageData(0,0,100,100);
for(var i=0;i<imageData.data.length;i++){
imageData.data[4*i+3] = 100; //设置该对象的A为100透明度
}
ctx.putImageData(imageData,0,0); // 将修改后的对象写入进场景中
###4.创建一个ImageData对象
createImageData(width,height)
width: ImageData新对象的宽度
height: ImageData新对象额高度
默认创建出来的是透明的
h5-canvas 像素操作的更多相关文章
- canvas像素操作
像素操作 相关方法:getImageData(x,y,w,h); putImageData(oImg,x,y); createImageData(w,h); 1.getImageData(x,y, ...
- HTML5_canvas_像素操作_图片马赛克_图片反相
canvas 像素操作 像素,即像素点,一个像素只有一个颜色 100*100 的 px 的屏幕区域有 100*100*4 个像素点,即 width*height*4 rgba(0, 0, 0, 1); ...
- HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频 像素操作属性和方法 width 返回 ImageData ...
- canvas上的像素操作(图像复制,细调)
canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...
- canvas像素的操作
###在canvas中的像素操作 到目前为止,我们尚未深入了解Canvas画布真实像素的原理,事实上, 你可以直接通过ImageData对象操纵像素数据,直接读取或将数据数组写入该对象中 ###得到场 ...
- 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 Bitmap 载入与像素操作
Android Bitmap 载入与像素操作 一:载入与像素读写 在Android SDK中,图像的像素读写能够通过getPixel与setPixel两个Bitmap的API实现. Bitmap AP ...
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
随机推荐
- python3中json模块的用法
__author__ = "JentZhang" import json user_info = {"} # 将字典转换为JSON字符串 json_str = json. ...
- 第一讲 新手如何学习HTTP协议之实践项目多开微信机器人
上一篇做了一个smart qq机器人. 前几天,因为突然上不了 smart qq,以为TX 要抛弃了..所以就没有接着完善smart 机器人.应朋友要求,做一个多开微信. 做了几天已经做好了,理论上 ...
- Java开发笔记(五十二)对象的类型检查
前面介绍了类的多态性,来自于鸡类的实例chicken,既能用来表达公鸡实例,也能用来表达母鸡实例.可是这导致了一个问题,假如在call方法内部需要手工判断输入参数属于公鸡实例还是母鸡实例,那该如何是好 ...
- DevOps让研发人员越来越失望?比如工作量与报酬
作为一名工程师,您在开发软件时已经有足够的责任.在您的工作日活动中添加更多任务(比如与DevOps相关的任务)可能听起来不太吸引人.使用DevOps,您不仅负责生成工作软件,而且现在还需要自动化软件的 ...
- JQuery显示,隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- ORA-12537: Network Session: End of file
最近开发组同事使用Azure的Function App访问公司内部的Oracle数据库时,偶尔会遇到"ORA-12537: Network Session: End of file" ...
- Xamarin移动开发的优点和缺点
在考虑iOS或Android应用程序开发时,我们大多数人会首先考虑Objective-C vs Swift和Java.作为本地技术堆栈,当涉及到iOS和Android应用程序开发时,它们自然是最常用的 ...
- SQLServer之触发器简介
触发器定义 触发器是数据库服务器中发生事件时自动执行的一种特殊存储过程.SQLServer允许为任何特定语句创建多个触发器.它的执行不是由程序调用,也不是手工启动,而是由事件来触发,当对数据库进行操作 ...
- 我的第一个python web开发框架(25)——定制ORM(一)
在开始编写ORM模块之前,我们需要先对db_helper进行重构,因为ORM最终生成的sql是需要转给db_helper来执行的,所以拥有一个功能完善.健壮的数据库操作类是非常必要的. 这是项目原db ...
- Cookies 和session
一 会话跟踪 在一个会话的多个请求中共享数据,这就是会话跟踪技术 请求登录(请求参数是用户名和密码): 请求转账(请求参数与转账相关的数据): 请求信誉卡还款(请求参数与还款相关的数据). 登录信息在 ...