javascript根據(jù)像素點(diǎn)取位置示例
<html>
<body>
<canvas id="canvas" width="100" height="100" style="background-color: #000;"/>
<script>
function position (x,y){
this.x = x;
this.y = y;
}
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
width = canvas.width,
height = canvas.height;
ctx.fillStyle = "#FF0000";
ctx.font = "20px Arial";
ctx.fillText("媽媽",10,50);
var pixs = ctx.getImageData(0,0,width,height).data;
var Pixels = new Array();
for(var i=0;i<pixs.length;i+= 4)
{
var r = pixs[i],
g = pixs[i+1],
b = pixs[i+2],
a = pixs[i+3];
if(r != 0 || g != 0 || b != 0 ){
var x = i%400;
var y = i/400;
Pixels.push(new position(x,y));
}
}
</script>
</body>
</html>
相關(guān)文章
JS字符串和數(shù)組如何實(shí)現(xiàn)相互轉(zhuǎn)化
這篇文章主要介紹了JS字符串和數(shù)組如何實(shí)現(xiàn)相互轉(zhuǎn)化,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
webpack4.x開(kāi)發(fā)環(huán)境配置詳解
這篇文章主要介紹了webpack4.x開(kāi)發(fā)環(huán)境配置方法,結(jié)合實(shí)例形式詳細(xì)分析了webpack4.x的具體安裝、項(xiàng)目創(chuàng)建、打包操作等相關(guān)問(wèn)題與處理技巧,需要的朋友可以參考下2018-08-08
js 頁(yè)面?zhèn)鲄?shù)時(shí) 參數(shù)值含特殊字符的問(wèn)題
解決方法就是利用js的escape函數(shù),這個(gè)函數(shù)在解決中文亂碼等方面應(yīng)用的比較廣泛。推薦使用。2009-12-12
JS判斷字符串變量是否含有某個(gè)字串的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS判斷字符串變量是否含有某個(gè)字串的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
微信小程序記錄用戶移動(dòng)軌跡的實(shí)戰(zhàn)記錄
最近遇到一個(gè)小程序的開(kāi)發(fā)需求,直接可以通過(guò)小程序就記錄運(yùn)動(dòng)軌跡,所以這篇文章主要給大家介紹了關(guān)于微信小程序記錄用戶移動(dòng)軌跡的相關(guān)資料,需要的朋友可以參考下2021-08-08
JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長(zhǎng)和第一幀畫面過(guò)程講解
當(dāng)我們做一個(gè)后臺(tái)系統(tǒng)的音視頻管理模塊時(shí),通常要限制文件的大小和類型,這篇文章主要介紹了JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長(zhǎng)和第一幀畫面過(guò)程,需要詳細(xì)了解實(shí)現(xiàn)方法可以參考下文2023-05-05
js實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)小功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)
這篇文章主要介紹了JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12
webpack里使用jquery.mCustomScrollbar插件的方法
malihu-custom-scrollbar-plugin是一個(gè)依賴jquery的自定義網(wǎng)頁(yè)滾動(dòng)條樣式插件,這篇文章主要介紹了webpack里使用jquery.mCustomScrollbar插件的方法,感興趣的小伙伴們可以參考一下2018-05-05

