canvas像素的操作
###在canvas中的像素操作
到目前为止,我们尚未深入了解Canvas画布真实像素的原理,事实上,
你可以直接通过ImageData对象操纵像素数据,直接读取或将数据数组写入该对象中
###得到场景像素数据
getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据
ctx.getImageData(sx, sy, sw, sh)
sx:将要被提取的图像数据矩形区域的左上角 x 坐标。
sy:将要被提取的图像数据矩形区域的左上角 y 坐标。
sw:将要被提取的图像数据矩形区域的宽度。
sh:将要被提取的图像数据矩形区域的高度。
var imageData=ctx.getImageData(,,,);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> html,body{
height: %;
overflow: hidden; }
body{
background: greenyellow;
}
#test{
position: absolute;
top: ;
left: ;
right: ;
bottom:;
margin: auto;
background: gray; }
</style>
</head>
<body>
<canvas id="test" width="" height="">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript"> window.onload=function(){
var canvas=document.querySelector("#test"); if(canvas.getContext){ var ctx=canvas.getContext('2d');
ctx.fillStyle="rgba(255,192,203,1)";
ctx.fillRect(, , , ); var imageData=ctx.getImageData(,,,);
for(var i=; i<imageData.data.length;i++){ imageData.data[*i+]=;
} ctx.putImageData(imageData,,) } }
</script>
</html>
###ImageData对象
ImageData对象中存储着canvas对象真实的像素数据,它包含以下几个只读属性:
width:图片宽度,单位是像素
height:图片高度,单位是像素
data:Uint8ClampedArray类型的一维数组,
包含着RGBA格式的整型数据,范围在0至255之间(包括255)
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)
###在场景中写入像素数据
putImageData()方法去对场景进行像素数据的写入。
putImageData(myImageData, dx, dy)
dx和dy参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标
ctx.putImageData(imageData,,)
###创建一个ImageData对象
ctx.createImageData(width, height);
width : ImageData 新对象的宽度。
height: ImageData 新对象的高度。
var imageData=ctx.createImageData(,);
默认创建出来的是透明的
###操作单个像素(行与列)
###马赛克
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> html,body{
height: %;
overflow: hidden; }
body{
background: greenyellow;
}
#test{
position: absolute;
top: ;
left: ;
right: ;
bottom:;
margin: auto;
background: gray; }
</style>
</head>
<body>
<canvas id="test" width="" height="">
<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
</canvas>
</body>
<script type="text/javascript"> window.onload=function(){
var canvas=document.querySelector("#test"); if(canvas.getContext){ var ctx=canvas.getContext("2d");
//默认创建出来的是透明的
var imageData=ctx.createImageData(,);
for(var i=; i<imageData.data.length;i++){ imageData.data[*i+]=; }
ctx.putImageData(imageData,,) } }
</script>
</html>
最新文章
- Eclipse的各种快捷键
- python27+django数据库配置常见问题
- GSS1 spoj 1043 Can you answer these queries I 最大子段和
- 【CSS3】---样式小技巧
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
- Linux启动提示“unexpected inconsistency;RUN fsck MANUALLY”
- [HttpException (0x80004005): Failed to Execute URL.]之画蛇添足之痛
- 关闭窗口(window.close)
- hdu1047(模拟大量的循环添加)
- Python 入门教程 9 ---- A Day at the Supermarket
- C语言bitmap的使用技巧
- Spark ML源码分析之二 从单机到分布式
- vscode中tab键无法触发emmet快捷生成
- vue 结合 FileReader() 实现上传图片预览功能
- cnblogs 支持 iframe 标签 !
- PHP 利用CURL(HTTP)实现服务器上传文件至另一服务器
- 【托业】【怪兽】TEST01
- NOIP2013华容道(BFS+乱搞)
- SPOJ NSUBSTR Substrings
- clientX,screenX,pageX,offsetX的异同
热门文章
- linux更新grub内核启动参数的方法
- 统计HDFS 上字节数据统计
- $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
- [Err] 1701 - Cannot truncate a table referenced in a foreign key constraint
- runtime和runloop问答
- 2019-4-15-VisualStudio-如何在-NuGet-包里面同时包含-DEBUG-和-RELEASE-的库
- 在Nginx/Tengine服务器上安装证书
- Failed selinux 错误
- springBoot项目mybatis中加入缓存
- Mybatis3中@SelectProvider传递参数