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

Question

我正在尝试沿着矩形编写每个边的描述。原因是要描述矩形内外（沿边）的每条边的长度。有没有办法实现它？var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// Clip a rectangular areactx.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

（指向这个答案 - 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>