Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/395.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在fillText返回0后获取画布像素_Javascript_Html_Canvas_Fonts - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 在fillText返回0后获取画布像素

Javascript 在fillText返回0后获取画布像素

javascript html canvas fonts

Javascript 在fillText返回0后获取画布像素,javascript,html,canvas,fonts,Javascript,Html,Canvas,Fonts,我曾试图使用HTML5画布和JavaScript获取任何字符的像素密度，但context getImageData始终返回一个数组，该数组似乎是一个漆黑的矩形（RGB=[0,0,0]始终） 谁能告诉我我做错了什么 var dcanvas=document.getElementById（'char-canvas'）， dcontext=dcanvas.getContext（'2d'）； 函数密度（c）{ dcanvas.height=30； dcanvas.width=30； dcontext.

我曾试图使用HTML5画布和JavaScript获取任何字符的像素密度，但context getImageData始终返回一个数组，该数组似乎是一个漆黑的矩形（RGB=[0,0,0]始终）

谁能告诉我我做错了什么

var dcanvas=document.getElementById（'char-canvas'），
dcontext=dcanvas.getContext（'2d'）；
函数密度（c）{
dcanvas.height=30；
dcanvas.width=30；
dcontext.clearRect（0，0，dcanvas.width，dcanvas.height）；
dcontext.font=“15px monospace”；
dcontext.fillStyle=“黑色”；
dcontext.textAlign=“中心”；
dcontext.textb基线=“中间”；
dcontext.fillText（c，dcanvas.width/2，dcanvas.height/2）；
var imgd=dcontext.getImageData（0,0，dcanvas.width，dcanvas.height），
pix=imgd.data，
密度=0；
//阅读画布像素RGBA！
对于（变量i=0，n=pix.length；i

画布{
边框：1px实心#000；
显示：块；
保证金：20px自动；
}


有趣的是，RGB 0中黑色返回的零是黑色的。
不需要设置超时



//全局
密度=0；
dcanvas=null；
dcontext=null；
imgd=null；
pix=null；
//计算
函数GET（）{
对于（变量i=0，n=pix.length；i

画布{
边框：1px实心#000；
显示：块；
保证金：0px自动；
}


默认像素值为黑色透明，因此当颜色为黑色时，RGB将始终返回0

要区分，您需要使用alpha通道：


var density = (pix[i] + pix[i + 1] + pix[i + 2]) * (pix[i + 3] / 255) / 3;
//                                               ^^^^^^^^^^^^^^^^^^^^



当然，这只是一种方法。为了避免抗锯齿像素成为计算的一部分，您只需使用阈值即可。
我真是个白痴。。。画布的默认“颜色”不是白色。。。非常感谢。