通过字母在画布上绘制文本，以控制单个字母的alpha，同时与中心对齐

Question

我试图以非常具体的方式在画布上绘制一些字母 - 能够定位单个字母并应用alpha。这些单词需要以基线为中心，并在画布中对齐中心并填充strokeText而不是填充样式。

文本也需要断行，例如;

现在，我已经尝试了几种方法来解决这个问题 - 当写出单词（作为完整单词）时它工作正常（没有淡入淡出） - 但是当我尝试将它们写成单独的字母时，我无法正确地将它们置于中心位置。我的代码在下面省略了特定字母上的alpha，一旦我能正确地将事物放在中心，这应该不是问题！

我意识到问题是我试图在画布上分别以0为中心绘制每个字母，并为每个字母添加字母间距，但考虑到中间线的不同大小，我无法想办法让它们居中！

var can = document.querySelector('canvas'),
    ctx = can.getContext('2d');
    
 function drawStroked(text, fontSize, color, offsetX, offsetY) {
        let line = text.split('
');
        this.ctx.font = fontSize + 'px ' + 'TimesNewRoman';
        this.ctx.strokeStyle = color;
        this.ctx.lineWidth = 2;
        this.ctx.textBaseline = 'middle';
        this.ctx.textAlign = 'center';
        let positionX = this.ctx.canvas.width/3;
        let positionY = this.ctx.canvas.height/4;

        if(offsetX !== 0) {
            positionX += offsetX;
        }

        if(offsetY !== 0) {
            positionY += offsetY;
        }
        for (var i = 0; i < line.length; i++) {
            for (var j = 0; j < line[i].length; j++) {
                let letterSpacing = 0;
                let lineHeight = positionY;

                if(line[i][j] === line[i].length) {
                    lineHeight = lineHeight * i;
                }
            this.ctx.strokeText(line[i][j], positionX + (letterSpacing + (j*130)), positionY + (i*fontSize));
            }
        }
    }
    
drawStroked('THIS
IS THE
TEXT', 100, '#000', 0, 0);

<canvas width="1000" height="1000"></canvas>

由Blindman67产生的输出和完成的代码！

const Hero = class {
    constructor(pos, canvas) {
        this.position = document.getElementById(pos);
        this.canvas = document.getElementById(canvas);
        this.height = document.getElementsByClassName('home')[0].clientHeight;
        this.width = this.position.offsetWidth;
        this.ctx = this.canvas.getContext('2d');
        this.title = 'THIS
IS THE
TEXT';
        this.canvas.width = this.width;
        this.canvas.height = this.height;

        this._init_ui();
    }

    // Draw text to text canvas
    _init_ui() {
        // BLUE
        this.drawStroked(300, '#1816ff', -3, 2, 0.95, [1, 5, 9, 12]);
        // GREEN
        this.drawStroked(300, '#1bff32', 0, 0, 0.95, [1, 5, 9, 12]);
        // RED
        this.drawStroked(300, '#ff162f', 3, -2, 0.95, [1, 5, 9, 12]);
    }

    drawStroked(fontSize, color, offsetX, offsetY, textVertSpacing, fade) {
        // Random Char's to scramble through --- to do
        // let chars = '!<>-_\/[]{}—=+*^?#________';
        // The words
        let line = this.title.split('
');
        // Set the font + size
        this.ctx.font = fontSize + 'px ' + 'Kommissar';
        // Set the colour - NEED TO ADD ALPHA LOGIC
        this.ctx.strokeStyle = color;
        // Set the stroke width
        this.ctx.lineWidth = 1;
        // Set the baseline
        this.ctx.textBaseline = 'middle';
        // Set the align
        this.ctx.textAlign = 'center';

        let positionX = this.width/2;
        let positionY = this.height/4;
        positionX += offsetX;
        positionY += offsetY;

        let charIndex = 0;

        for (var i = 0; i < line.length; i++) {
            // get the width of the whole line
            let width = this.ctx.measureText(line[i]).width;
            console.log(width);
            // use the width to find start
            var textPosX = positionX - width / 2;

            for (let j = 0; j < line[i].length; j++) {
                // get char
                let char = line[i][j];
                // get its width
                let cWidth = this.ctx.measureText(char).width;
                // check if char needs to fade
                if (fade.indexOf(charIndex) > -1) {
                    this.ctx.globalAlpha = 0.2;
                } else {
                    this.ctx.globalAlpha = 1;
                }
                // draw the char offset by half its width (center)
                this.ctx.strokeText(char, textPosX + cWidth / 2, positionY);
                // move too the next pos
                textPosX += cWidth;
                // count the char
                charIndex += 1;
            }
            // move down one line
            positionY += fontSize * textVertSpacing;
        }
    }
};

export default Hero;

Answer 1

另一答案

通过字母在画布上绘制文本，以控制单个字母的alpha，同时与中心对齐

由Blindman67产生的输出和完成的代码！

Use `ctx.measureText`

正确的字符间距

淡化字符

简单的例子......

通过字母在画布上绘制文本，以控制单个字母的alpha，同时与中心对齐

由Blindman67产生的输出和完成的代码！

Use ctx.measureText

正确的字符间距

淡化字符

简单的例子......

Use `ctx.measureText`