javascript - 沿边缘在矩形外绘制 Canvas 文本

Question

我正在尝试沿着矩形编写每条边的描述。原因是描述矩形内外每条边的长度(alongside)。有什么办法可以实现吗？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);

这应该在顶部边缘(外部)上方显示 200，在左侧边缘(外部)显示 150

Answer 1

使用@stealththeninja 的评论(指向这个答案 - text in html canvas )和这个 jsfiddle (对于文本旋转)，我能够构建下面的代码。希望它符合您的规范。

附上结果截图。

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    const rectPosX = 50;
    const rectPosY = 50;
    const rectLength = 200;
    const rectHeight = 150;

    ctx.fillStyle = "red";
    ctx.fillRect(rectPosX, rectPosY, rectLength, rectHeight);

    ctx.fillStyle = "blue";
    ctx.fillText('200', rectPosX + rectLength / 2, rectPosY);
    ctx.fillText('150', rectPosX, rectPosY + rectHeight / 2);
    ctx.fillText('200', rectPosX  + rectLength / 2, rectPosY + rectHeight);

    ctx.save();
    ctx.translate(rectPosX + rectLength, rectPosY + rectHeight / 2);
    ctx.rotate(0.5*Math.PI);
    ctx.fillText('150', 0, 0);
    ctx.restore();

<canvas id="myCanvas" width="400" height="300"></canvas>