那麼這些圖形的每個mesh的座標可不是手動去寫，如果你願意我當然不攔著！所以今天這篇就來介紹如何獲得這些圖形的座標資料。
我們首先開啟
然後仔細閱讀後
我們可以發現 乙個api： getimagedata() 可以獲得 canvas當前畫面上的影象資料。
每個畫素，都存在著四方面的資訊，即 rgba 值：
r - 紅色 (0-255)
g - 綠色 (0-255)
b - 藍色 (0-255)
a - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)
那麼對於下面這張圖(100*100)，處理成 黑白兩色（純黑，純白）
我們通過getimagedata() 獲得資料 應該有 100*100*4條資料，並且他們是
[222,214,111,255,124,222,125,255......] 這樣的形式在陣列中
↑ 第乙個畫素 ↑ ↑ 第二個畫素 ↑
畫素點是從左至右，從上至下的順序寫入的！
得到資料後，我們是不是可以很輕鬆的判斷每個點的顏色情況。
例如
var c=document.getelementbyid("mycanvas");
var ctx=c.getcontext("2d");
var img=document.getelementbyid("tulip");
ctx.drawimage(img,0,0);
var imgdata=ctx.getimagedata(0,0,c.width,c.height).data;
if(imgdata[0]+imgdata[0+1]+imgdata[0+2]==0)
if(imgdata[4]+imgdata[4+1]+imgdata[4+2]==0)
看了以上**可能還有疑惑，請從新理解以上加粗、彩色文字部分
都到這裡了想必你已經能走自己獲得sina這張圖黑色點的座標了吧！所以下面直接給全部**了
var canvas = document.getelementbyid("canvas");
var ctx = canvas.getcontext('2d');
var _img=new image()
_img.onload=function()
_img.src="contact_p.png"
//隨機取出400個黑色點的座標
function getdatapoint(_data)
):redo()
} redo()
} return _arr
}
8款驚豔的HTML5粒子動畫特效
html5確實非常強大，很多時候我們可以利用html5中的新技術實現非常炫酷的粒子動畫效果，粒子動畫在html5應用中也是比較消耗本地資源的，尤其是cpu，但是有些html5粒子效果確實能給使用者帶來不一樣的驚豔使用者體驗。本文就是要分享8款效果驚豔的html5粒子動畫特效，希望你可以喜歡。這是一款...
7款讓人驚嘆的HTML5粒子動畫特效
這是一款利用html5 canvas模擬出來的30000個粒子動畫，當你用滑鼠在canvas畫布上移動時，滑鼠周圍的一些粒子就會跟著你移動，並形成一定的圖案，就像你在玩沙畫一樣，效果非常不錯。這裡，我們應用了一些html5的特性，讓這個粒子動畫顯得相當動感。之前我們分享過很多超酷的文字特效，其中也有...
7款讓人驚嘆的HTML5粒子動畫特效
這是一款利用html5 canvas模擬出來的30000個粒子動畫，當你用滑鼠在canvas畫布上移動時，滑鼠周圍的一些粒子就會跟著你移動，並形成一定的圖案，就像你在玩沙畫一樣，效果非常不錯。這裡，我們應用了一些html5的特性，讓這個粒子動畫顯得相當動感。之前我們分享過很多超酷的文字特效，其中也有...