在 canvas 上逐像素绘制文本

Question

我有一个 canvas，其中我使用 "fillText" 和一个字符串，例如 "Whosebug"。然后我读取 canvas 的图像数据以挑选出该文本的每个像素。

我想从像素中选取以下内容：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 = "Whosebug";
    _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;
    }
}

Answer 1

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

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.imageSmoothingEnabled= false;
    _ctx.fillStyle = "rgb(0, 154, 253)";
    // _ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

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

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

    var pixels = _ctx.getImageData(0, 0, _width, _height).data;
    var data32 = new Uint32Array(pixels.buffer);
    var positions = [];
        for(i = 0; i < data32.length; i++) {
        if (data32[i] & 0xffff0000) {
            positions.push({
                x: (i % _width),
                y: ((i / _width)|0),
                a: pixels[i*4 + 3] / 255
            });
        }
    }

    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.fillStyle = `rgba(0,128,0,${particle.alpha})`;
    
    _ctx.fillRect(x, y, 1, 1);
}

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;
        this.alpha = pos.a;
    }
}

<canvas id="textCanvas"></canvas>

在 canvas 上逐像素绘制文本

Draw text pixel by pixel on canvas

html

javascript

canvas

particles

html5-canvas