Javascript 在画布上逐像素绘制文本

我有一个画布，其中我使用带有字符串的“fillText”，比如说“stackoverflow”。然后我读取画布上的imagedata，以便挑出文本的每个像素

我想从像素中选取以下内容：x位置、y位置及其颜色。然后我想用这些像素在数组上循环，这样我可以一个像素一个像素地画出文本，这样我就可以完全控制每个像素，例如可以为它们设置动画

然而，我没有得到我想要的那么顺利。看看我的“附加”图像，您会看到顶部文本和我使用fillRect为每个像素绘制的文本之间的差异。关于如何使新文本看起来像“fillText”文本有什么帮助吗

谢谢

更新：添加了我的代码

var _particles = [];
var _canvas, _ctx, _width, _height;

(function(){
    init();
})();

function init(){
    setupParticles(getTextCanvasData());
}

function getTextCanvasData(){
    // var w = 300, h = 150, ratio = 2;

    _canvas = document.getElementById("textCanvas");
    // _canvas.width = w * ratio;
    // _canvas.height = h * ratio;
    // _canvas.style.width = w + "px";
    // _canvas.style.height = h + "px";

    _ctx = _canvas.getContext("2d");
    _ctx.fillStyle = "rgb(0, 154, 253)";
    // _ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

    var str = "stackoverflow";
    _ctx.font = "32px EB Garamond";
    _ctx.fillText(str,0,23);

    _width = _canvas.width;
    _height = _canvas.height;

    var data32 = new Uint32Array(_ctx.getImageData(0, 0, _width, _height).data.buffer);
    var positions = [];

    for(i = 0; i < data32.length; i++) {

        if (data32[i] & 0xffff0000) {
            positions.push({
                x: (i % _width),
                y: ((i / _width)|0),
            });
        }
    }

    return positions;
}

function setupParticles(positions){
    var i = positions.length;
    var particles = [];
    while(i--){
        var p = new Particle();
        p.init(positions[i]);
        _particles.push(p);

        drawParticle(p);
    }
}

function drawParticle(particle){
    var x = particle.x;
    var y = particle.y;

    _ctx.beginPath();
    _ctx.fillRect(x, y, 1, 1);
    _ctx.fillStyle = 'green';
}

function Particle(){
    this.init = function(pos){
        this.x = pos.x;
        this.y = pos.y + 30;
        this.x0 = this.x;
        this.y0 = this.y;
        this.xDelta = 0;
        this.yDelta = 0;
    }
}

var_particles=[]；
变量画布、ctx、宽度、高度；
（功能（）{
init（）；
})();
函数init（）{
setupParticles（getTextCanvasData（））；
}
函数getTextCanvasData（）{
//var w=300，h=150，比率=2；
_canvas=document.getElementById（“textCanvas”）；
//_.width=w*比值；
//_.height=h*比值；
//_canvas.style.width=w+“px”；
//_canvas.style.height=h+“px”；
_ctx=_canvas.getContext（“2d”）；
_ctx.fillStyle=“rgb（0154253）”；
//_ctx.setTransform（比率，0，0，比率，0，0）；
var str=“stackoverflow”；
_ctx.font=“32px EB Garamond”；
_ctx.fillText（str，0,23）；
_宽度=_canvas.width；
_高度=_.height；
var data32=新的UINT32数组（_ctx.getImageData（0,0,u width,u height）.data.buffer）；
var头寸=[]；
对于（i=0；i

---

这里是对代码的更新，它重用每个像素的alpha组件。仍然会有一些细节丢失，因为我们没有保持像素的抗锯齿（这实际上改变了打印的实际颜色），但是对于这个例子，alpha就足够了

var_particles=[]；
变量画布、ctx、宽度、高度；
（功能（）{
init（）；
})();
函数init（）{
setupParticles（getTextCanvasData（））；
}
函数getTextCanvasData（）{
//var w=300，h=150，比率=2；
_canvas=document.getElementById（“textCanvas”）；
//_.width=w*比值；
//_.height=h*比值；
//_canvas.style.width=w+“px”；
//_canvas.style.height=h+“px”；
_ctx=_canvas.getContext（“2d”）；
_ctx.imageSmoothingEnabled=假；
_ctx.fillStyle=“rgb（0154253）”；
//_ctx.setTransform（比率，0，0，比率，0，0）；
var str=“stackoverflow”；
_ctx.font=“32px EB Garamond”；
_ctx.fillText（str，0,23）；
_宽度=_canvas.width；
_高度=_.height；
var pixels=\u ctx.getImageData（0，0，宽度，高度）；
var data32=新的UINT32阵列（像素.缓冲区）；
var头寸=[]；
对于（i=0；i

---

我猜画布正在使用抗锯齿。边界上的像素既不是蓝色也不是粉红色——它们介于两者之间。当你画画的时候，你正在为任何“不是粉红色”的东西画绿色，因此你的画更大更粗糙。@SQLHacks是的，但是我可以按顺序画alpha颜色以使它平滑吗？现在我有了绿色的fillRect，所以它可能应该是alpha值，现在是绿色的？@nickelman请发布你的代码。除了颜色之外，你很可能还需要读取每个像素的alpha值，并在绘制时使用它。@gabykag.Petrioli当然！帖子已经更新了，看起来不错。非常感谢。