Canvas + JavaScript 製做圖片粒子效果

時間 2019-11-19

標籤 canvas javascript 製做圖片粒子效果欄目 JavaScript 简体版

原文原文鏈接

首先看一下源圖和轉換成粒子效果的對比圖：javascript

左側圖片爲源圖，右側圖片爲粒子效果圖。該效果是在Canvas畫布上製做的。將圖片製做成粒子效果相對而言是比較簡單的。重點了解兩個知識點便可html

1:圖片是經過image對象形式繪製在畫布上的，而後使用Canvas的getImageData接口，獲取圖像的像素信息。java

var imageData=ctx.getImageData(x, y, width, height);

參數說明：x，y爲畫布上的x和y座標canvas

　　　　　width，height爲獲取指定區域圖像的信息數組

返回值說明：imageData爲返回值，它是一個對象，包含三個屬性瀏覽器

imageData={
    data:Unit8ClampedArray[10000] //一個包含圖片區域內每一個像素點的RGBA的整型數據信息
    height:200   //讀取的圖片像素信息區域高度
    width:200 　　//讀取的圖片像素信息區域寬度
}

2:瞭解像素區域數據的排布說明，以上獲取的圖片數據像素信息(imageData對象中的data屬性)爲RGBA整型的一維數組數據。一個像素是有4個值（R,G,B,A）組成的。也就是說，數組信息每四個爲一個像素點。所以，有如下規則，dom

　　第一個像素信息爲：RGBA(data[0],data[1],data[2],data[3])post

第二個像素信息爲：RGBA(data[4],data[5],data[6],data[7])spa

.....code

第N個像素信息爲: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

.....

　　另外，像素區域既然是一個區域，它是有寬和高的。上面的推算公式適合單獨一行使用定位一個像素點。因此計算像素點時要考慮到在整個圖像區域內定位：

　　以上圖爲例。圖像的寬和高都爲200，若是按照每個像素爲一行一列時。則該圖像共有200行，200列。因此要取得 i 行第 j 列的像素初始位置信息爲：

　　　　　　var pos =[( i-1 )*200]+( j-1 )]*4;

　　其中，公式中的 i 表示行數，j 表示列數。200爲圖像的寬度。

demo代碼：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="600" height="400" style="background:#000">瀏覽器不支持canvas</canvas> </body> <script type="text/javascript"> var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); var image = new Image(); image.src='/WebWorkspace/EchartDemo/images/star.png'; var pixels=[]; //存儲像素數據 var imageData; image.onload=function(){ ctx.drawImage(image,200,100,200,200); imageData=ctx.getImageData(200,100,200,200); //獲取圖表像素信息  getPixels(); //獲取全部像素  drawPic(); //繪製圖像  }; function getPixels(){ var pos=0; var data=imageData.data; //RGBA的一維數組數據 //源圖像的高度和寬度爲200px for(var i=1;i<=200;i++){ for(var j=1;j<=200;j++){ pos=[(i-1)*200+(j-1)]*4; //取得像素位置 if(data[pos]>=0){ var pixel={ x:200+j+Math.random()*20, //從新設置每一個像素的位置信息  y:100+i+Math.random()*20, //從新設置每一個像素的位置信息 fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')' } pixels.push(pixel); } } } } function drawPic(){ var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); ctx.clearRect(0,0,600,400); var len=pixels.length,curr_pixel=null; for(var i=0;i<len;i++){ curr_pixel=pixels[i]; ctx.fillStyle=curr_pixel.fillStyle; ctx.fillRect(curr_pixel.x,curr_pixel.y,1,1); } } </script> </html>

相關標籤/搜索

每日一句

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