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

