javascript根據(jù)像素點(diǎn)取位置示例
更新時(shí)間:2014年01月27日 15:58:29 作者:
這篇文章主要介紹了javascript根據(jù)像素點(diǎn)取位置的示例,大家參考使用吧
復(fù)制代碼 代碼如下:
<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)文章
基于Ionic3實(shí)現(xiàn)選項(xiàng)卡切換并重新加載echarts
這篇文章主要介紹了基于Ionic3實(shí)現(xiàn)選項(xiàng)卡切換并重新加載echarts,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09原生js實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)解鎖功能?js實(shí)現(xiàn)滑動(dòng)拼圖解鎖
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)解鎖功能,js實(shí)現(xiàn)滑動(dòng)拼圖解鎖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11js實(shí)現(xiàn)帶進(jìn)度條提示的多視頻上傳功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶進(jìn)度條提示的多視頻上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07Express框架中_router?對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解
這篇文章主要為大家介紹了Express框架中_router的對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03基于Javascript實(shí)現(xiàn)的不重復(fù)ID的生成器
本文介紹了js生成一個(gè)不重復(fù)的ID的函數(shù)的進(jìn)化之路,具有一定的參考價(jià)值,需要的朋友一起來看下吧2016-12-12JavaScript中的常見問題解決方法(亂碼,IE緩存,代理)
這篇文章主要是對(duì)JavaScript中的常見問題解決方法(亂碼,IE緩存,代理)進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所 幫助2013-11-11