码迷,mamicode.com
首页 > 其他好文 > 详细

canvas像素的操作

时间:2019-11-10 17:46:44      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:++   写入   flow   margin   code   array类   meta   gray   absolute   

###在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>
View Code

 


###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>
View Code

 

canvas像素的操作

标签:++   写入   flow   margin   code   array类   meta   gray   absolute   

原文地址:https://www.cnblogs.com/hack-ing/p/11830816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!