canvas像素的操作
Posted hack-ing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas像素的操作相关的知识，希望对你有一定的参考价值。
###在canvas中的像素操作
到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上，
你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中
###得到场景像素数据
getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据
ctx.getImageData(sx, sy, sw, sh)
sx:将要被提取的图像数据矩形区域的左上角 x 坐标。
sy:将要被提取的图像数据矩形区域的左上角 y 坐标。
sw:将要被提取的图像数据矩形区域的宽度。
sh:将要被提取的图像数据矩形区域的高度。
var imageData=ctx.getImageData(0,0,100,100);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ height: 100%; overflow: hidden; } body{ background: greenyellow; } #test{ position: absolute; top: 0; left: 0; right: 0; bottom:0; margin: auto; background: gray; } </style> </head> <body> <canvas id="test" width="300" height="300"> <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(0, 0, 100, 100); var imageData=ctx.getImageData(0,0,100,100); for(var i=0; i<imageData.data.length;i++){ imageData.data[4*i+3]=100; } ctx.putImageData(imageData,0,0) } } </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,0,0)
###创建一个ImageData对象
ctx.createImageData(width, height);
width : ImageData 新对象的宽度。
height: ImageData 新对象的高度。
var imageData=ctx.createImageData(100,100);
默认创建出来的是透明的
###操作单个像素（行与列）
###马赛克
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
overflow: hidden;
}
body{
background: greenyellow;
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
margin: auto;
background: gray;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">
<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(100,100);
for(var i=0; i<imageData.data.length;i++){
imageData.data[4*i+3]=255;
}
ctx.putImageData(imageData,100,100)
}
}
</script>
</html>
以上是关于canvas像素的操作的主要内容，如果未能解决你的问题，请参考以下文章