在画布上的一个文本中形成不同的格式？

Question

假设我有以下文字：

The Text

是否可以在画布上写下此文字，但The粗体和Text正常？

所以看起来会这样：

文字

我知道编写整个文本粗体的方法，但我找不到单独格式化的方法。

Answer 1

只要粗体字首先出现，您就可以简单地写下现有文字：

var canvas = document.body.appendChild(document.createElement("canvas"));
var size = canvas.width = canvas.height = 200;
var ctx = canvas.getContext("2d");
function draw() {
    ctx.clearRect(0, 0, size, size);
    ctx.font = "10pt Courier";
    ctx.fillText("The Text", 100, 100);
    setTimeout(function () {
        ctx.font = "bold 10pt Courier";
        ctx.fillText("The", 100, 100);
        setTimeout(draw, 1000);
    }, 1000);
}
draw();

编辑1 - 回复评论

如果字符串更复杂，可以使用measuretext来计算位置并动态切换字体：

/**
 * drawText
 * Draws a string on a canvas. Handles <b> tags.
 * @param {{
 * 	text: string,
 * 	canvas: HTMLCanvasElement,
 * 	offsetY?: number
 * 	offsetX?: number,
 * 	fontFamily?: string
 * 	fontSize?: number
 * 	clear?: boolean
 * }} params
 * @returns
 */
function drawText(params) {
    //get parameters
    var text = params.text !== void 0 ? params.text : "";
    var canvas = params.canvas !== void 0 ? params.canvas : null;
    if (canvas instanceof HTMLCanvasElement == false) {
        console.error("You must provide a canvas to draw on");
        return false;
    }
    var ctx = canvas.getContext("2d");
    var fontFamily = params.fontFamily !== void 0 ? params.fontFamily : "Courier";
    var fontSize = params.fontSize !== void 0 ? params.fontSize : 10;
    var offsetX = params.offsetX !== void 0 ? params.offsetX : 0;
    var offsetY = params.offsetY !== void 0 ? params.offsetY : 0;
    //Split string by <b> tags
    var formatted = text.split(/<\/b>|<b>/ig)
        .filter(function (val) {
        return val.length > 0;
    });
    //Clear canvas
    if (params.clear !== void 0 ? params.clear : false) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    //set base font
    ctx.font = fontSize + "pt " + fontFamily;
    //Test if we start bold
    var b = (text.substr(0, 1) == "<b");
    for (var i = 0; i < formatted.length; i++) {
        var t = formatted[i];
        //Inverse bold on each step
        b = !b;
        if (b == true) {
            ctx.font = fontSize + "pt " + fontFamily;
        }
        else {
            ctx.font = "bold " + fontSize + "pt " + fontFamily;
        }
        //Calculate offset
        var offset = i === 0 ? 0 : ctx.measureText(formatted.slice(0, i).join("")).width;
        //Draw at position
        ctx.fillText(t, offset + offsetX, offsetY);
    }
    return true;
}
//TEST
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 230;
canvas.height = 30;
drawText({ text: "I Freaking <b>Love</b> Darth <b>Vader!</b>", canvas: canvas, offsetY: 10 });
drawText({ text: "I Freaking <b>Love</b> Darth <b>Vader!</b>", canvas: canvas, offsetY: 25 });

Answer 2

绘图文字很难，最难的部分是根据字体计算文本的位置（(0, 0)的第一个粗体部分，(50, 0)处的第二个粗体部分。）

我建议你carota（似乎不再维护但效果很好），它已经处理了所有内容并且具有HTML友好的数据模型。如果您不想要任何依赖关系，或者如果您认为它太过分，那么Emil的解决方案会更好。

Answer 3

也许这会对你有所帮助。只需写两次文字！

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font= "Bold 30px Arial";
ctx.fillText("The",10,50);
ctx.font= "30px Arial";
ctx.fillText("Text",70,50);

<canvas id="myCanvas" width="200" height="100"></canvas>