沿边缘在矩形外部绘制画布文本

Question

我正在尝试沿着矩形书写每个边缘的描述。原因是要描述矩形内部和外部（沿边）每个边缘的长度。有办法可以实现吗？

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（用于文本旋转），我能够构建以下代码。希望它符合您的规格。

所附结果的屏幕截图。

(Test(isEven));
(Test<decltype(isEven)>(isEven)); 

    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();