canvas像素的操做

時間 2019-11-16

標籤 canvas 像素简体版

原文原文鏈接

###在canvas中的像素操做
到目前爲止，咱們還沒有深刻了解Canvas畫布真實像素的原理，事實上，javascript

你能夠直接經過ImageData對象操縱像素數據，直接讀取或將數據數組寫入該對象中
css

###獲得場景像素數據
getImageData():得到一個包含畫布場景像素數據的ImageData對像,它表明了畫布區域的對象數據

ctx.getImageData(sx, sy, sw, sh)
sx:將要被提取的圖像數據矩形區域的左上角 x 座標。
sy:將要被提取的圖像數據矩形區域的左上角 y 座標。
sw:將要被提取的圖像數據矩形區域的寬度。
sh:將要被提取的圖像數據矩形區域的高度。
html

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(透明到不透明)
java

###在場景中寫入像素數據
putImageData()方法去對場景進行像素數據的寫入。
putImageData(myImageData, dx, dy)
dx和dy參數表示你但願在場景內左上角繪製的像素數據所獲得的設備座標canvas

ctx.putImageData(imageData,0,0)

###建立一個ImageData對象
ctx.createImageData(width, height);
width : ImageData 新對象的寬度。
height: ImageData 新對象的高度。數組

var imageData=ctx.createImageData(100,100);

默認建立出來的是透明的瀏覽器

###操做單個像素（行與列）ide

###馬賽克spa

<!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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。