javascript - 如何使用 fabric.js Canvas 库在 Canvas 上创建的矩形内写入文本

Question

是否可以在 HTML5 Canvas 上创建的矩形上写入文本？并且当我们移动矩形时也会移动文本。

Answer 1

避免在动画 Canvas 上分层 HTML

现有的两个答案都建议您使用 HTML 并在 Canvas 上添加文本。

这在代码方面可能更容易，但请注意，包含动画或更改内容的 Canvas 上的文本将需要渲染(合成)覆盖文本，即使您只更改 Canvas 上的单个像素或页面上的重新流动。

在 Canvas 上放置多个项目并更改这些项目中的任何一个都可以在某些编码样式下强制所有项目与底层 Canvas 元素重新组合。

如果您定期(或实时)更改内容，请始终使用 requestAnimationFrame 以避免不必要的页面内容合成。

框文字复杂化？

由于您没有给出有关文本、大小、框数的上下文，如果要对其进行动画处理(实时或亚实时)，是否有任何转换，您是否使用渐变、图案、滤镜、合成操作或阴影。所有这些都需要不同的技术才能在质量和性能方面获得最佳结果。

简单框文本

最基本的。一个文本居中的文本框可以用一个简单的函数来完成。

参数都有默认值，您只需要传递一个对象来设置您要更改的参数。

const myTextBox = {text: "Hi World!!", x: 100, y: 20, background: "#08F8"};
boxText(myTextBox);

function boxText({
        c = ctx, 
        text, x, y, 
        font = "arial", 
        size = 32, 
        padding = 4, 
        color = "#FFF", 
        boxStyle = "#000", 
        background = "", 
        lineWidth = 2
    }) {    
    c.font = size + "px " + font;
    c.textAlign = "center";
    c.textBaseline = "middle";
    const width = c.measureText(text).width;
    if (background) {
        c.fillStyle = background;
        c.fillRect(x, y, width + padding * 2, size + padding * 2);
    }
    if (boxStyle) {
        c.strokeStyle = boxStyle;
        c.lineWidth = lineWidth;
        c.strokeRect(
            x - lineWidth / 2, y - lineWidth / 2,
            width + padding * 2 + lineWidth, size + padding * 2 + lineWidth
        );
    }
    c.fillStyle = color;
    c.fillText(text, x + width / 2 +  padding, y + padding + size / 2 + size / 16);
}

请注意，在这段代码中，我将文本向下移动了一点，您可能不想这样做，所以只需将最后一行更改为 c.fillText(text, x + width/2 + padding, y + padding + 尺寸/2);

演示

在动画示例中使用上述功能。

requestAnimationFrame(renderLoop);
const ctx = canvas.getContext("2d");

const textA = {text: "Hi World!!", x: 100, y: 20, background: "#08F8"};
const textB = {text: "Example 2", x: 100, y: 80, size: 26, color: "black", background: "#F808"};

function renderLoop(time) {
   ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
   textA.x = Math.sin(time / 2500) * 150 + 160;
   textB.x = Math.cos(time / 2500) * 150 + 160;
   textB.text = "Time: " + (time / 1000).toFixed(3);
   boxText(textA);
   boxText(textB);
   requestAnimationFrame(renderLoop);
}


function boxText({
        c = ctx, text, x, y, 
        font = "arial", size = 32, color = "#FFF",
        padding = 4, background = "", 
        boxStyle = "#000", lineWidth = 2
    }) {    
    c.font = size + "px " + font;
    c.textAlign = "center";
    c.textBaseline = "middle";
    const width = c.measureText(text).width;
    if (background) {
        c.fillStyle = background;
        c.fillRect(x, y, width + padding * 2, size + padding * 2);
    }
    if (boxStyle) {
        c.strokeStyle = boxStyle;
        c.lineWidth = lineWidth;
        c.strokeRect(
            x - lineWidth / 2, y - lineWidth / 2,
            width + padding * 2 + lineWidth, size + padding * 2 + lineWidth
        );
    }
    c.fillStyle = color;
    c.fillText(text, x + width / 2 +  padding, y + padding + size / 2 + size / 16);
}

<canvas id = "canvas" width=500 height=150></canvas>